Cara Membuat Progress Loading Bar Seperti di YouTube

Cara Membuat Progress Loading Bar Seperti di YouTube - Jika anda pernah membuka situs youtube.com, jika anda jeli maka anda akan melihat sebuah progress bar di paling atas web berwarna merah dari kiri ke kanan. Bagamana kalu kita memasangnya di blog kita, pasti blog kita terlihat keren bukan.

Setelah saya mencari plugin progress bar saya menemukan plugin nanobar. Sebuah Javascript untuk progress bar yang tidak memerluka jQuery dengan ukuran yang sangat kecil sehingga tidak akan terlalu membebani loading blog kita.

Kostumisasinya cukup mudah, saya yakin anda pun bisa dengan mudah mengkostumisasi sesuai keinginan anda sendiri.Untukcontooh progress bar anda bisa membuka situs youtube.com disana anda bisa melihat progress bar saat anda pertama kali masuk pada situs tsb.

Pada SS di atas kita bisa lihat ada progress bar berwarna merah diatas web. Bagaimana anda tertarik untuk memasang pada blog anda ?

Silahkan copy kode dibawah ini dan letakkan 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>

 Catatan :
height:"2px" untuk ketebalan loading bar
 b;a.bg=a.bg||"#db3131" untuk merubah warna loading bar

Sumber : http://nanobar.micronube.com/