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

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 

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Khải Nguyễn Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
nhận xét
Không có nhận xét nào

Bình luận

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

Đăng nhận xét