Skip to main content

Membuat Progress Bar Di Blog Seperti Loading Bar 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, pasti Anda akan sering melihat progress loading bar di atas berwarna merah, yang berjalan dari kiri kenan.

Tentunya sangat menarik jika kita terapkan pada blog. Untuk cara membuat progress bar ini juga cukup mudah. Untuk demonya bisa lihat gambar di bwah ini.



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

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 bar tersebut, silahkan atur sesuai keinginan Anda.
Kode #db3131 untuk warna loading bar, silahkan ganti #db3131 dengan kode warna yang Anda sukai.

You Might Also Like:

Buka Komentar