Dari beberapa plugin progress bar yang saya coba, akhirnya pilihan saya jatuh pada nanobar. Sebuah javascript untuk progress bar yang tidak memerlukan jquery dengan ukuran yang sangat kecil sehingga tidak akan terlalu membebani loading blog.
Kustomisasinya pun cukup mudah, saya yakin Anda semua pasti bisa. Untuk contoh progress bar Youtube bisa Anda lihat pada animasi gif di bawah ini. Dan demo penerapan nanobar progress bar pada blog bisa Anda coba pada link demo di bawahnya.

Bagaimana? Anda tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan copy kode javascript di bawah ini dan simpan 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>
Kustomisasi
Code Source: http://nanobar.micronube.com/
Sign up here with your email
1 komentar:
Write komentarNo more live link in this comments field
ReplyKomentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM. ConversionConversion EmoticonEmoticon