Yükleniyor Animasyonu HTML Kodu

YouTube Tarzı Loading (Loader) Efekti HTML Kodu

Özellikle YouTube ve bir çok sosyal medya sitesinde açılışta en üstte görünen çizgi şeklinde ilerleyen ve sitenin tepki verdiğini sadece biraz beklemeniz gerektiğini gösteren bar şeklinde ilerleyen yüklenme efekti kullanmaktadır.

Sayfa hızlı yüklenirse en üste çıkan kırmızı çizgi de hızlı bir şekilde hareket eder. Bence çoğu yükleniyor animasyonundan daha şık ve kullanışlı.

 <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>  

Web sitelerde kullanmak için yukarıdaki kodu  temanızda </body> etiketinden hemen önce eklemeniz gerekir.

HTML / JAVASCRİPT EKLEMEK

Temada kullanmak için :

Blogger > Tema > HTML'yi Düzenle > </body> etiketinden önce eklemeniz gerekir.

Widget (gadget) olarak eklemek için :

Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

Sayfa içinde kullanmak için :

Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

code :)