Cara Menciptakan Progress Loading Kafe Menyerupai Di Youtube
Cara Membuat Progress Loading Bar Seperti di YouTube - Jika anda pernah membuka situs youtube.com, jikalau anda jeli maka anda akan melihat sebuah progress kafetaria di paling atas web berwarna merah dari kiri ke kanan. Bagamana kalu kita memasangnya di blog kita, niscaya blog kita terlihat keren bukan.
Setelah aku mencari plugin progress kafetaria aku menemukan plugin nanobar. Sebuah Javascript untuk progress kafetaria yang tidak memerluka jQuery dengan ukuran yang sangat kecil sehingga tidak akan terlalu membebani loading blog kita.
Kostumisasinya cukup mudah, aku yakin anda pun dapat dengan gampang mengkostumisasi sesuai impian anda sendiri.Untukcontooh progress kafetaria anda dapat membuka situs youtube.com disana anda dapat melihat progress kafetaria ketika anda pertama kali masuk pada situs tsb.
height:"2px" untuk ketebalan loading bar
b;a.bg=a.bg||"#db3131" untuk merubah warna loading bar
Sumber : http://nanobar.micronube.com/
Setelah aku mencari plugin progress kafetaria aku menemukan plugin nanobar. Sebuah Javascript untuk progress kafetaria yang tidak memerluka jQuery dengan ukuran yang sangat kecil sehingga tidak akan terlalu membebani loading blog kita.
Kostumisasinya cukup mudah, aku yakin anda pun dapat dengan gampang mengkostumisasi sesuai impian anda sendiri.Untukcontooh progress kafetaria anda dapat membuka situs youtube.com disana anda dapat melihat progress kafetaria ketika anda pertama kali masuk pada situs tsb.
Pada SS di atas kita dapat lihat ada progress kafetaria berwarna merah diatas web. Bagaimana anda tertarik untuk memasang pada blog anda ?
Silahkan copy instruksi dibawah ini dan letakkan di atas instruksi </body>
<script type='text/javascript'>Catatan :
//<![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
b;a.bg=a.bg||"#db3131" untuk merubah warna loading bar
Sumber : http://nanobar.micronube.com/
