Membuat Progress Loading Bar Blog Seperti Youtube

Membuat Progress Loading Bar Blog Seperti Youtube

Jika anda adalah seorang yang sering mengunjungi situs dan melihat sebuah video di youtube maka ketika membuka salah satu video, anda akan melihat progress loading animasi di bagian atas bar panjang yang berwarna merah.

Membuat Progress Loading Bar Blog Seperti Youtube

Berkaitan dengan itu pada kesempatan kali ini saya akan membuatkan tutorial cara membuat progress loading bar blog kita bisa seperti di tampilan youtube tersebut, Progress Loading Bar ini nantinya akan muncul setiap anda membuka halaman pada blog seperti gambar di bawah ini.

Membuat Progress Loading Bar Blog Seperti Youtube

Membuat Progress Loading Bar Blog Seperti Youtube

Anda bisa lihat di gambar gif tersebut, terlihat garis merah di bagian bar atas saat memuat halaman youtube, itulah contoh untuk demonya.

1. Buka Blogger > Pilih Template > Edit HTML > Lalu salin dan tambahkan kode dibawah 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>

Keterangan :

height:"2px" = Ketebalan garis warna merah loading progress
#db3131" = Ini adalah kode warna, silahkan rubah sesuka hati anda.

Sekian untuk tutorial Cara Membuat Progress Loading Bar Blog Seperti Youtube. Semoga bermanfaat.
Load comments