Membuat progress loading bar ala youtube

MurliCyber    11/15/2014    Jquery , Original post , Tutorial blog    Comment   

Yeay,membuat progrees loading bar di blog tentu banyak sekali tutorial nya di google
dan efek dari animasi loading bar itu bermacam macam,ada yang bentuk cubik animasi ada yang seperti loading google+ bahkan seperti loading animasi pada windows 8,nah kali ini gw akan memberikan tutorial serupa juga tapi ini efek nya berbeda dari pada yang lain

apa yang membuat efek yang gw share ini berbeda?
ya,karena efek loading bar nya seperti di youtube,pernah liat kan? di bar atas kalian yang panjang warna merah ini di penampakan nya

beda banget kan dari progress loading bar dengan yang lain nya?

selain pemakain nya simple juga gak terlalu memberatkan blog,yuk langsung aja pasang

Basic code nya

letakkan kode di bawah ini 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>

setting
height:"2px" untuk ketebalan loading bar
a.bg=a.bg||"#db3131" ini untuk warna loading bar,kalau ingin mengganti nya cukup ganti kode ini #db3131

source