Di Panduan kali ini, Saya akan memberitahukan Cara Membuat Skills Bar dengan Animasi.
Fungsi skills bar ini adalah untuk memvisualkan hasil dari sebuah data sehingga terlihat lebih menarik.
Contoh penggunaannya:
- Menampilkan hasil Polling.
- Loading pada suatu aplikasi atau website.
- Proses Download pada Smartphone.
Penampilan Skills bar-nya seperti ini:
Tertarik untuk membuatnya ?
Ini code-code yang dibutuhkan:
CSS
<style>
.skillbar{font-family:'Open Sans','sans-serif';position:relative;display:block;margin-bottom:15px;width:100%;background:#eee;height:35px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-transition-property:width,background-color;-moz-transition-property:width,background-color;-ms-transition-property:width,background-color;-o-transition-property:width,background-color;transition-property:width,background-color}
.skillbar-title{position:absolute;top:0;left:0;font-weight:bold;font-size:13px;color:#fff;background:#6adcfa;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.skillbar-title span{display:block;background:rgba(0,0,0,0.1);padding:0 20px;height:35px;line-height:35px;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-topleft:3px;-moz-border-radius-bottomleft:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}
.skillbar-bar{height:35px;width:0;background:#6adcfa;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}
.skill-bar-percent{position:absolute;right:10px;top:0;font-size:11px;height:35px;line-height:35px;color:#444;color:rgba(0,0,0,0.4)}
</style>
HTML
<div class="skillbar clearfix " data-percent="65%"> <div class="skillbar-title" style="background: #88cd2a;"><span>HTML5</span></div> <div class="skillbar-bar" style="background: #88cd2a;"></div> <div class="skill-bar-percent">65%</div> </div> <div class="skillbar clearfix " data-percent="85%"> <div class="skillbar-title" style="background: #00a8ff;"><span>CSS</span></div> <div class="skillbar-bar" style="background: #00a8ff;"></div> <div class="skill-bar-percent">85%</div> </div> <div class="skillbar clearfix " data-percent="60%"> <div class="skillbar-title" style="background: #00a8ff;"><span>CSS</span></div> <div class="skillbar-bar" style="background: #00a8ff;"></div> <div class="skill-bar-percent">60%</div> </div>
jQuery
<script>
jQuery('.skillbar').each(function(){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},2000);
});
</script>Code CSS taruh di dalam code <style>.
Code HTML taruh di dalam code <body>.
Code jQuery taruh diatas code </body>.
Punya Masalah ?
Masih belum bisa mengimplementasikan skills bar ini di blog Anda ?
Atau mungkin Anda membutuhkan Panduan yang mengajarkan cara mengimplementasikan codenya secara step by step ?
Anda bisa menanyakan itu semua di kolom Komentar.
Dengan senang hati Saya akan membantu semua permasalahan Anda (ง'̀-'́)ง.