Membuat Progress Loading Kafetaria Blog Ibarat Youtube

Membuat Progress Loading Bar Blog Seperti Youtube - Jika kita jeli saat 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 dapat menciptakan pregress loading bar menyerupai itu di Blogger dengan sumbangan javascript.

Dari beberapa plugin progress kafe yang aku coba, kesannya pilihan aku jatuh pada nanobar. Sebuah javascript untuk progress kafe yang tidak memerlukan jquery dengan ukuran yang sangat kecil sehingga tidak akan terlalu membebani loading blog.

Kustomisasinya pun cukup mudah, aku yakin Anda semua niscaya bisa. Untuk pola progress kafe Youtube dapat Anda lihat pada animasi gif di bawah ini. Dan demo penerapan nanobar progress kafe pada blog dapat Anda coba pada link demo di bawahnya.

DEMO on Blog

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

Silahkan copy arahan javascript di bawah ini dan simpan di atas arahan </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

height:"2px" untuk ketebalan loading bar.

a.bg=a.bg||"#db3131" untuk warna loading bar, silahkan ganti #db3131 dengan warna yang Anda sukai.

Code Source: http://nanobar.micronube.com/

Sumber https://www.kompiajaib.com/

Share this post