Membuat Loading Bar di Blog Ala Youtube

Loading Bar seperti Youtube

Jika kita jeli ketika kita membuka halaman Youtube, maka kita akan melihat sebuah progress bar di paling atas situs berwarna merah dari kiri ke kanan. Cukup keren bukan? Kita pun bisa membuat progress loading bar seperti itu di Blogger dengan bantuan javascript.

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.

DEMO Blog Live

Bagaimana? Tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah ini.

Tutorial

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 / Customization

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

Sekian, Terima Kasih.

Sumur : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html