Hướng dẫn tạo hiệu ứng tải trang (loading) trên header giống Youtube cho Blogger - Blogspot

bài viết này mình sẽ chia sẻ tới các bạn code tạo hiệu ứng tải trang giống Youtube cho Blogger. Đây là một tiện ích làm đẹp cho Blog của bạn, khá hay tuy nhiên nếu bạn không yêu thích hiệu ứng này, hãy thử chèn vào blog một lần và trải nghiệm nhé! Đồng Việt sẽ giúp bạn tạo hiệu ứng này cho Blogger

Tạo hiệu ứng tải trang giống Youtube cho Blogger

Đây là một tiện ích Blogger khá nhẹ và không ảnh hưởng nhiều tới tốc độ load trang của bạn. Nếu bạn đang làm một trang về chia sẻ video, đây sẽ là một tiện ích khá hữu hiệu, tạo sự thân quen cho người truy cập.

Các bước thực hiện

Bạn tiến hành chèn đoạn code sau lên trước thẻ đóng </body>

 <script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var a,b,c,d,e,f,g={width:"100%",height:"2px",zIndex:9999,top:"0"},h={width:0,height:"100%",clear:"both",transition:"height .3s"};return a=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"},d=function(){var a=this,b=this.width-this.here;.1>b&&-.1<b?(e.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(e.call(this,this.width-b/4),setTimeout(function(){a.go()},16))},e=function(a){this.width=a,this.el.style.width=this.width+"%"},f=function(){var a=new b(this);this.bars.unshift(a)},b=function(b){this.el=document.createElement("div"),this.el.style.backgroundColor=b.opts.bg,this.here=this.width=0,this.moving=!1,this.cont=b,a(this.el,h),b.el.appendChild(this.el)},b.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,d.call(this))):this.moving&&d.call(this)},c=function(b){b=this.opts=b||{};var c;b.bg=b.bg||"#e62117",this.bars=[],c=this.el=document.createElement("div"),a(this.el,g),b.id&&(c.id=b.id),c.style.position=b.target?"relative":"fixed",b.target?b.target.insertBefore(c,b.target.firstChild):document.getElementsByTagName("body")[0].appendChild(c),f.call(this)},c.prototype.go=function(a){this.bars[0].go(a),100==a&&f.call(this)},c}(),nanobar=new Nanobar;nanobar.go(30),nanobar.go(60),nanobar.go(100);
//]]>
</script>

Lưu ý: Bạn có thể thay màu #e62117 thành màu sắc sao cho phù hợp với blog của bạn nhé!