Tạo hiệu ứng ĐANG TẢI trên header giống Youtube cho Blogspot
Hôm nay ngồi xem video trên Youtube, vô tình để ý cái hiệu ứng khi chuyển trang của nó ở trên header, thấy hay hay nên mò code, cuối cùng cũng thấy, mang về thêm vào cho blog thấy khá OK nên giờ ngồi viết bài chia sẻ cách tạo hiệu ứng ĐANG TẢI giống Youtube cho Blogspot
Tạo hiệu ứng ĐANG TẢI trên header giống Youtube cho Blogspot
Bạn nào chưa hình dung được nó là cái gì thì nhìn hình bên dưới nhé, để ý lên đầu ấy, cái đường kẻ đỏ nó load
Cách thực hiện
Copy đoạn code bên dưới rồi dán vào trước thẻ </body> trong template rồi Lưu lại là OK<!--code tạo loading tren header giong youtube luannguyenit.com-->
<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||"#FF0000";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>
Lưu ý: Các bạn có thể thay đổi những thông số sau cho phù hợp với blog của mình
height:"3px" (Chiều cao của đường viền)
#FF0000 (Màu đường viền)
height:"3px" (Chiều cao của đường viền)
#FF0000 (Màu đường viền)
