Membuat Progress Kafe Di Blog Menyerupai Loading Kafe Youtube

Membuat Progress Bar Di Blog Seperti Loading Bar Youtube - Setelah sebelumnya Saya posting Membuat Progess Bar Warna Warni Di Blog, pada kesempatan kali ini Saya akan coba posting Membuat Progress Bar Di Blog Seperti Loading Bar Youtube.

Jika Anda sering membuka situs Youtube, niscaya Anda akan sering melihat progress loading kafe di atas berwarna merah, yang berjalan dari kiri kenan.

Tentunya sangat menarik jikalau kita terapkan pada blog. Untuk cara menciptakan progress kafe ini juga cukup mudah. Untuk demonya dapat lihat gambar di bwah ini.

Nah, jikalau Anda ingin mencoba Membuat Progress Bar Di Blog Anda, mari kita lihat caranya berikut 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>

Perhatian:

Kode height:2px untuk ketebalan loading bar. Silahkan ganti angka 2 untuk mengatur ketebalan garis loading. Semakin besar angkanya maka akan semakin tebal garis loading kafe tersebut, silahkan atur sesuai cita-cita Anda.
Kode #db3131 untuk warna loading bar, silahkan ganti #db3131 dengan arahan warna yang Anda sukai.

Share this Article