HOT !!!Hiện Tại HungCoder.Com Đang Phát Hành Trang Chat Miễn Phí Cho Mọi Người Giao Đỗi Thông Tin Với Nhau.Click Here

Thứ Sáu, tháng 5 19, 2017

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

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 bomkhung.info-->
<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)

Nguồn : PhanHung.Info

3 nhận xét

  1. Trả lời
    1. Có gì mà ghê thím ;) chỉ copy paste thôi mà chứ có gì đâu ^^

      P/s Bờm đây ^^

      Xóa
    2. Có gì mà ghê chời. hàng copy đấy thím ạ =))

      Xóa


Top