Chia Sẻ Code Tạo Hiệu Ứng Load Trang Bằng CSS

Thứ Hai, 30 tháng 4, 2018

Chia Sẻ Code Tạo Hiệu Ứng Load Trang Bằng CSS

Tạo Hiệu Ứng Load Trang Bằng CSS

Hiệu Ứng Load Trang
Ở bài viết này, tôi sẽ hướng dẫn các bạn tạo hiệu ứng load trang độc đáo cho website của bạn mà không cần đến gif loading!

Cách Tạo Hiệu Ứng
Bước 1: Đăng Nhập vào Blogger > Tại Chỉnh Sửa HTML Thêm đoạn css sau mà cuối thẻ </b:skin> hoặc </style>
#preloader{position:fixed;z-index:1800;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background-color:#5ea1e5}
.no-js #preloaders,.oldie #preloaders{display:none}
#loader{position:absolute;top:calc(50% - 1.25em);left:calc(50% - 1.25em)}
.loader{display:inline-block;width:30px;height:30px;position:relative;border:4px solid #Fff;top:50%;animation:loader 2s infinite ease}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in}
@keyframes loader {
0%{transform:rotate(0deg)}
25%{transform:rotate(180deg)}
50%{transform:rotate(180deg)}
75%{transform:rotate(360deg)}
100%{transform:rotate(360deg)}
}
@keyframes loader-inner {
0%{height:0}
25%{height:0}
50%{height:100%}
75%{height:100%}
100%{height:0}
}
Bước 2: Thêm Đoạn Code sau dước thẻ <body>
<div id='preloader'>
  <div id='loader'>
    <span class='loader'>
      <span class='loader-inner'></span>
    </span>
  </div>
</div> 
Bước 3: Thêm Đoạn JS sau trước thẻ </body> là xong
<script type='text/javascript'>
 /*<![CDATA[*/
$(window).bind("load", function () {
    jQuery("#loader").fadeOut("slow");
    jQuery("#preloader").delay(0).fadeOut();
});
  /*]]>*/
</script>
Bước 4: Hưởng Thụ :D 


Cùng tham gia bình luận bài viết này nhé!

Không có nhận xét nào:

Đăng nhận xét