Tạo hiệu ứng loading cực ngầu cho blogspot

Chào các bạn đọc giả của Codedayroi.com, hôm nay mình sẽ đem đến các bạn mẫu loading dành riêng cho blogspot cực ngầu. Và các bạn có thể xem demo hình ảnh bên dưới để rõ hơn nhé

HƯỚNG DẪN CÁCH LÀM:

Để thêm code này các bạn vào Chỉnh sửa HTML trong blogger.com và tìm đoạn thẻ <body> rồi thêm toàn bộ đoạn code bên dưới xuống nó
<!-- Start Page Loading -->
<style>
/*----------------------------------------
    Pre-loader
------------------------------------------*/
#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #eceff1;
  z-index: 1000;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

#loader-logo {
  display: block;
  position: absolute;
  left: 48%;
  top: 46%;
  background: url("https://i.imgur.com/Nj02xhh.png") no-repeat center center;
  z-index: 1001;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.progress {
  background-color: rgba(255, 64, 129, 0.22);
}

/* JavaScript Turned Off */
.no-js #loader-wrapper {
  display: none;
}

</style>
<div id='loader-wrapper'>
<div id='loader'></div>
<div class='loader-section section-left'></div>
<div class='loader-section section-right'></div>
</div>
<script type='text/javascript'>
//<![CDATA[
  /*Preloader*/
  $(window).on('load', function() {
    setTimeout(function() {
      $('body').addClass('loaded');
    }, 200);
  });

  $(function() {

    "use strict";

    var window_width = $(window).width();
    var openIndex;
    // Detect touch screen and enable scrollbar if necessary
    function is_touch_device() {
      try {
        document.createEvent("TouchEvent");
        return true;
      } catch (e) {
        return false;
      }
    }
  });
//]]>
</script>
<!-- End Page Loading -->
Mình có 1 lưu ý nhỏ với các bạn là, nếu muốn đoạn code đó load tại trang chủ thì chèn nó vào trong đoạn thẻ điều kiện ở trang chủ bên dưới
<b:if cond='data:blog.url == data:blog.homepageUrl'>[Chèn đoạn code loading vào đây nhé]</b:if>
Chúc các bạn thành công!

5
4
3
2
1

13 nhận xét:

» Hướng dẫn nhúng hình ảnh: [img]http://domain.com/image.png[/img]
» Tham trang khảo ảnh động cực cute: Qoobee
» Hướng dẫn nhúng link trang web: <a href="url" rel="nofollow" target="_blank">Link</a>
» Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
» Không spam link, chia sẻ các link không liên quan đến bài viết.
» Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
» Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.

Group giao lưu, giải đáp và chia sẻ kinh nghiệm blogspot - blogger :

  • Kích hoạt giao diện tối
  • Giao diện tối giúp bạn nhìn vào ban đêm, làm dịu mắt và tránh căng thẳng khi phải nhìn vào màn hình sáng quá nhiều.

    Đếm ngược thời gian đến tết Kỷ Hợi 2019