Hiệu ứng LOADING Cầu Vòng đẹp cho Blogspot

Chào các bạn, các bạn cảm thấy Kelvin Duong's Blog có sự thay đổi gì không nè?! Đúng vậy, đó là hiệu ứng tải trang (loading) mình vừa thêm vào Blog ^^ Mình đã từng có ý định thêm hiệu ứng Loading khá lâu nhưng do vấn đề tốc độ load trang của mình lúc trước rất chậm nên mình đành ngậm ngùi ngắm nhìn em nó thôi chứ không dám sử dụng :( Và sau khi fix được tốc độ tải trang thì hiện tại có bạn có thể thấy đấy ^^

Nếu bạn có vấn đề về tải trang hãy thử áp dụng DNS Prefecth mà mình đã chia sẻ nhé!

Quay lại vấn đề chính, hôm nay Kel mạo mụi sẽ chia sẻ cho các bạn một hiệu ứng Loading đẹp mắt cho Blogspot - Cầu Vòng Style. Mình thấy nó cũng khá chất và mượt nên nếu các bạn thích có thể áp dụng ngay vào Blog của mình nhé! Nào, chúng ta cùng bắt đầu thôi...

#CÁC BƯỚC THỰC HIỆN

Bước 1: Vào Chủ đề > Chỉnh sửa HTML
Bước 2: Thêm đoạn CSS dưới này vào TRƯỚC thẻ ]]></b:skin>

.loader {
    background: #000;
    background: radial-gradient(#222, #000);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.loader-line-wrap {
    animation: 
  spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
 ;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}

@keyframes spin {
    0%, 15% {
  transform: rotate(0);
 }
 100% {
  transform: rotate(360deg);
 }
}

Bước 3: Tìm thẻ <body> Rồi dán đoạn HTML này vào phía DƯỚI thẻ vừa tìm được.

<div class="loader">
 <div class="loader-inner">
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
  <div class="loader-line-wrap">
   <div class="loader-line"></div>
  </div>
 </div>
</div>