Skip to main content
WARIM

follow us

Membuat Progress Bar Di Blog

Membuat Progress Bar Di Blog - Progres bar adalah seperti loading. Jika Anda sering membuka youtube, pasti Anda akan sering melihat progress bar di atas yang berwarna merah, dari kiri kenan, dan akan menghilang jika halaman sudah berhasil di muat sepenuhnya.

Tentunya sangat menarik jika kita terapkan pada blog. Untuk caranya pun tidaklah sulit. 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>

Note:

height:2px untuk ketebalan loading bar. Silahkan ganti angka 2 untuk mengatur ketebalan garis loaoding.
#db3131 untuk warna loading bar, silahkan ganti #db3131 dengan warna yang Anda sukai.

You Might Also Like:

Buka Komentar