Membuat Progress Loading Bar Blog Seperti Youtube

Membuat Progress Loading Bar Blog Seperti Youtube - Agan agan semua pasti pernah mengunjungi situs youtube, entah itu mau nyari video tutorial maupun hanya sekedar mendengarkan lagu ataupun menonton film. kalau agan perhatiken dengan teliti pada bagian atas situs youtube pasti ada progressbar yang berwarna merah kalau kita baru membuta video. Menurut agan keren bukan ?.

Untuk blogger juga bisa menambahkan desain seperti itu, dengan bantuan javascript, yaitu javascript nanobar, untuk masalah kecepatan loading blog mungkit tidak terlalu membebani karena ukuran jQuery nya pun hanya kecil.

Untuk kustomisasi bisa dibilang sangat mudah karena agan bisa merubah warna maupun ukuran dari nanobar tersebut, untuk reviewnya agan bisa melihat gambar gif dibawah ini

Untuk demo langsungnya agan langsung aja refresh halaman blog ini dan lihat diatas ada garis biru yang berjalan.

Oke untuk menambahkan progressbar seperti you tube ini agan hanya menambahkan code javascript ini diatas code </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>

Resource by : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html