Animasi Loading Pada Link Yang Di Hover Dengan CSS ~ Beauty Ninja

Animasi efek loading progress bar pada link yang di hover

Apa itu animasi loading link?

Yang saya maksud disini adalah suatu link yang jika kita hover suatu link maka akan muncul progress bar. Contoh sobat bisa lihat dibawah ini

Rishad

Yang kita gunakan untuk membuat progress bar efek seperti diatas adalah CSS. Dan sebenarnya code CSS yang digunakan sangat simpel, saking simpelnya saya bisa membuatnya sembari membuat kopi :v

Penasaran seperti apa CSS nya? seperti ini

box-shadow:inset 50px 0 #31ace8;

Sangat simpel bukan? Penggunaannya pun sangat mudah. Jika sobat ingin semua link mendapatkan animasi. Sobat tinggal menaruh CSS diatas di selector "a"
contoh

a:hover {box-shadow:inset 50px 0 #31ace8;}

Taruh kode diatas keatas ]]></b:skin>. Maka semua link akan berubah..
Tapi jika sobat menginginkan animasinya hanya di tempat tertentu, sobat bisa meletakannya di selector2
contoh

.post-body a:hover {box-shadow:inset 50px 0 #31ace8;}

Maka yang terjadi adalah semua link di daerah selector .post-body akan berubah.
Nah jika sobat mau menaruhnya ditempat tertentu saja. Sobat bisa memakai CSS dibawah

#bnloading:hover {box-shadow:inset 50px 0 #31ace8;}

Lalu sobat bisa memanggilnya kapan saja dengan menaruh kode dibawah ini.

<a id='bnloading' href='http://beauty-ninja.blogspot.com'>BEAUTY NINJA</a>

Sobat ganti teks biru diatas dengan link yang dituju dan teks jingga dengan katanya.

Mudah bukan sob? Tapi, menurut sobat itu kurang menarik ya.. Untuk membuatnya lebih menarik, sobat harus memberinya style dengan css.
Contoh saat aku memberi css text-decoration:none dan padding:7px seperti dibawah ini

#bnloading:hover {box-shadow:inset 50px 0 #31ace8}
#bnloading {padding:7px;text-decoration:none}

Maka hasilnya akan seperti dibawah ini
BEAUTY NINJA

Oh iya, hasil diatas loading yang muncul hanya sedikit kan? Itu akan saya jelaskan dibawah.

Sebelumnya sobat tahu kan apa itu CSS? Pasti tahu ya.. Dan jika kalian blogger, maka wajib mengetahuinya karena CSS adalah yang membuat tampilan blog menarik. Dan pasti sobat sudah mendengar yang namanya box-shadow kan. box-shadow adalah css pemberi efek bayangan. Lalu kenapa css diatas efeknya bukan memberi bayangan? karena ada inset.
Coba sobat bandingkan perbedaannya di http://jsfiddle.net/rishadharis/tk8cL53a/
Jadi ibaratnya, tanpa inset bayangan yang dimunculkan dibelakang, sedangkan inset bayangan berada di dalam/depan. Jadi saya memanfaatkannya.

Oh iya, saya sudah berjanji menjelaskan tentang contoh teks diatas yang hanya sedikit. Hal itu disebabkan karena ukuran yang saya tentukan hanya 50px. Coba sobat ganti menjadi 120px menjadi box-shadow:inset 120px 0 #31ace8; maka akan muncul semua. Dan, mau berapapun di atas 120px, tidak akan melebihi teksnya, tetapi mempengaruhi kecepatannya.

PERHITUNGAN CSS BOX-SHADOW

Apa maksudnya? maksudnya adalah cara kenapa bisa terjadi efek loading progress bar.

Saya harus jelaskan dulu, dalam box-shadow:inset 50px 0 #31ace8; teks jingga adalah horizontal. Hijau adalah vertikal. dan teks merah adalah warna. Jadi jika sobat mengisi teks jingga dengan 80 maka akan muncul bayangan dengan warna #31ace8 secara horizontal.coba sobat mengisi teks jingga dengan 0 dan teks hijau dengan 50px dan teks merah dengan #21bbb8. Maka bayangan yang akan muncul dari atas.

PERLU DIPERHATIKAN

Agar animasinya mulus, sobat harus sudah menaruh CSS Transition pada selectornya. CSS Transition yang-ku maksud adalah contohnya #bnloading:hover {transition: all .5s ease;}

Jadi, silahkan sobat cari tahu terlebih dahulu di google.

*Jika sobat menginginkan cara cepat agar semua terdapat CSS Transition, itu cukup mudah.

Cukup taruh kode dibawah ke atas ]]></b:skin>

* {transition:all .5s ease}

Kode diatas mengakhiri beauty ninja untuk menjelaskan, jika ada yang ingin ditanyakan bisa melalui komentar.

Terus karyakan dan buat animasi menarik

LOADING...