Membuat Efek Loading Blog Seperti Youtube Valid HTML5

Membuat Efek Loading Blog Seperti Youtube Valid HTML5

Youtube Adalah sebuah aplikasi yang mengijinkan penggunanya mengupload, Menonton bahkan Mendownload video pribadi maupun video lainnya kedalam wadah yang ditentukan, video yang kita upload dapat di tonton orang di seluruh dunia tanpa batasan waktu. namun pernahkan anda melihat sebuah bar di bagian atas ada sebuah efek loading keren yang akan muncul ketika kita akan membuka salah satu video youtube.

Jika anda sedang memutar sebuah Video di youtube pasti anda akan melihat sebuah efek loading yg berjalan diatas bar berwarna merah, nah loading bar keren ini bisa juga kita terapkan di blog kita dan tentunya juga bisa mempercantik blog kita di mata pengunjung.

Jika anda tertarik anda bisa memasang loading bar ini di blog anda. Untuk membuatnya tidaklah terlalu sulit, anda hanya cukup menambahkan JavaScript di atas </body>

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"3px",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||"#df0d0d";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>

Simpan Template dan lihat hasilnya.

Demikian cara Membuat Efek Loading Bar Seperti Youtube di blog. Semoga bermanfaat.

Inspired: Kompi Ajaib
Advertisement
Advertisement

Diam lebih baik dari pada berdebat dengan orang‐orang bodoh.