Youtube Adalah sebuah aplikasi yang mengijinkan penggunanya mengupload, Menonton bahkan Mendownload video eksklusif maupun video lainnya kedalam wadah yang ditentukan, video yang kita upload sanggup di tonton orang di seluruh dunia tanpa batasan waktu. namun pernahkan anda melihat sebuah kafe di bab atas ada sebuah efek loading keren yang akan muncul dikala kita akan membuka salah satu video youtube.
Jika anda sedang memutar sebuah Video di youtube niscaya anda akan melihat sebuah efek loading yg berjalan diatas kafe berwarna merah, nah loading kafe keren ini sanggup juga kita terapkan di blog kita dan tentunya juga sanggup mempercantik blog kita di mata pengunjung.
Jika anda tertarik anda sanggup memasang loading kafe 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