Skip to main content
KOMPI AJAIB

follow us

Membuat Progress Loading Bar Blog Seperti Youtube

Baca juga:

Membuat Progress Loading Bar Blog 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 pregress 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.



Bagaimana? Anda tertarik untuk mencobanya? Silahkan ikuti langkah-langkahnya di bawah 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>

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/

You Might Also Like:


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar