Animasi Skill Bar Menggunakan CSS3

Hello Guys, Pada tutorial saya kali ini kita akan membahas bagaimana membuat Animasi Skill Bar hanya menggunakan efek animasi yang terdapat di CSS3. Animasi Skill Bar ini hanya bisa berjalan di browser Firefox, Safari dan Chrome. Oke Guys langsung saja kita buat Animasi Bar skill ini dan kita terapkan di Website kita.

Pertama teman-teman bisa buat struktur HTML nya seperti di bawah ini :

Di Struktur HTML tersebut saya menggunakan tag ul dan li (unordered list), dimana didalam tag li saya menggunakan tag span dan tag em untuk membungkus deskripsi keterapilan kita, dan di setiap deskripsi keterapilan yang kita isikan saya memberikan class yang berbeda-beda karena untuk mengatur lebar yang akan kita tentukan di CSS nanti

Nah untuk CSS nya teman-teman bisa ikuti Source nya seperti dibawah ini :

Buat teman-teman yang ingin melihat hasilnya dan copy sourcenya secara keseluruhan bisa klik di SINI

Sekian dulu tutorial dari saya, semoga dengan tutorial ini teman-teman bisa berkreasi membuat Aminasi Skill Bar yang sederhana hanya dengan CSS3. Selamat mencoba ya teman-teman. Terima Kasih.