Cara Membuat Animasi Progress Loading Bar Seperti Youtube Di Blog

Kali ini saya akan berbagi kepada kalian sebuah tutorial Blogger tentang bagaimana cara membuat animasi progress loading bar seperti pada situs Youtube di blog. Jika kita jeli, saat membuka situs Youtube, saat proses loading akan ada bar berwarna merah yang menunjukkan proses load. Jika kalian belum mengerti, kalian bisa melihat contohnya dengan mengklik link demo di bawah ini :

Demo

Nah, bagaimana kalau kita juga membuatnya dan memasangnya di blog kita. Tentu akan sangat bagus dan blog kita akan terlihat seperti profesional. Kita juga tidak perlu terlalu takut akan memperberat blog karena loading bar ini sangat ringan. Bagaimana? Apakah kalian tertarik membuatnya? Berikut ini adalah caranya :

• Pertama, masuk ke dasboard blog kalian.
• Masuk ke bagian Template dan pilih Edit HTML.
• Masukkan kode di bawah ini tepat di atas kode </body> :

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

• Jika sudah, tinggal kalian simpan dan lihat hasilnya.

Keterangan :

Kode yang berwana BIRU adalah kode tebal bar. Kalian bisa menyesuaikannya.

Kode yang berwana HIJAU adalah kode warna bar. Kalian bisa menyesuaikannya.

Bagaimana? Berhasil bukan? Sekian artikel dari saya. Semoga bermanfaat bagi kita semua. Jangan lupa tinggalkan komentar dan klik tombol like di bawah ini.

Share :

Facebook Google+ Twitter