Membuat Animasi Loading Dengan CSS

Pada kesempatan kali ini saya akan membagikan beberapa efek animasi loading dengan CSS, efek animasi loading ini saya dapatkan dari www.saifullah.id, bentuknya pun sangat beragam dan keren tentunya. Dulu Ketika kamu ingin membuat animasi loading pada halaman/postingan blog yang dibuat dengan gambar yang berformat GIF, tetapi seiring berkembangnya dunia development kini kamu bisa membuat nya hanya menggunakan kode CSS.

Biasanya efek animasi loading ini akan tampil pada halaman website di reload, tidak hanya di halaman website saja kini animasi loading ini banyak para blogger yang menampilkan nya di halaman safelink saat countdown berjalan.

Berikut ada beberapa efek animasi loading sederhana dengan menggunakan CSS. Teman-teman bisa mempelajarinya lebih lanjut, disini saya hanya membagikan beberapa efek animasi loading yang saya dapatkan dari www.saifullah.id

Kode CSS

.lds-circle{display:inline-block;transform:translateZ(1px);}
.lds-circle > div{display:inline-block;width:64px;height:64px;margin:8px;border-radius:50%;background:#149f8350;animation:lds-circle 2.4s cubic-bezier(0,0.2,0.8,1) infinite;}
@keyframes lds-circle{
  0%,100%{animation-timing-function:cubic-bezier(0.5,0,1,0.5);}
  0%{transform:rotateY(0deg);}
  50%{transform:rotateY(1800deg);animation-timing-function:cubic-bezier(0,0.5,0.5,1);}
  100%{transform:rotateY(3600deg);}
;}

Kode HTML
<div class="lds-circle"><div></div></div>

Kode CSS

.lds-dual-ring{display:inline-block;width:80px;height:80px;}
.lds-dual-ring:after{content:" ";display:block;width:64px;height:64px;margin:8px;border-radius:50%;border:6px solid #fff;border-color:#fff transparent #fff transparent;animation:lds-dual-ring 1.2s linear infinite;}
@keyframes lds-dual-ring{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
;}
Kode HTML
<div class="lds-dual-ring"></div>

Kode CSS

.lds-ripple{display:inline-block;position:relative;width:80px;height:80px}
.lds-ripple div{position:absolute;border:4px solid #149f8350;opacity:1;border-radius:50%;animation:lds-ripple 1s cubic-bezier(0,0.2,0.8,1) infinite}
.lds-ripple div:nth-child(2){animation-delay:-0.5s}
@keyframes lds-ripple{0%{top:36px;left:36px;width:0;height:0;opacity:1}100%{top:0;left:0;width:72px;height:72px;opacity:0}}
Kode HTML
<div class="lds-ripple"><div></div><div></div></div>

Cara Menggunakan Efek Animasi Loading

  1. Login ke Blogger Dashboard > Pilih Blog > Template > Edit HTML
  2. Pada kolom edit html, lalu tempatkan kode CSS yang kamu pilih diatas kode ]]></b:skin> 
  3. Klik save
  4. Untuk Kode HTML-nya, tempatkan dimana kamu ingin menampilkannya.
Silahkan dicoba. Apabila ada kesulitan dan mengalami error, jangan sungkan untuk tanyakan di komentar. Semoga bermanfaat.
Baca juga :