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
Các bước Thật Hiện :
Copy đoạn code phía dưới rồi dán phái dưới </body> Trong Template Rồi Lưu Lại Là Ok
JS
<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||"#2980B9",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 ý: 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:”2px” (Chiều cao của đường viền)
#2980B9 (Màu đường viền)
Hiệu ứng Loading Giống Youtube Chuẩn Từng Giây
4/
5
Oleh
Unknown
