√ Cara Menciptakan Proses Loading Kafe Blog Menyerupai Youtube

Cara pemasangannya sangat mudah, aku yakin Anda semua niscaya bisa. Untuk tumpuan progress kafetaria Youtube dapat Anda lihat pada animasi gif diatas. Dan demo penerapan nanobar progress kafetaria pada blog dapat Anda coba pada link demo di ini.

Lihat Hasil

ini instruksi j4vascriptnya .. taruh sempurna diatas kode </body>

<script type='text/j4vascript'>//<![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>

height:"2px" untuk ketebalan loading bar.a.bg=a.bg||"#db3131" untuk warna loading bar, silahkan ganti #db3131 dengan warna yang Anda sukai.

Sumber http://tiksatuweru.blogspot.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Baca juga:

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: