Tạo hiệu ứng Preloader với jQuery

18/01/2015

Trước đây, mình giới thiệu cho các bạn rất nhiều hiệu ứng loading làm từ CSS3, hôm nay mình sẽ chia sẻ cho các bạn hiệu ứng preloader được làm từ jQuery với chỉ vài dòng code đơn giản.

tao-hieu-ung-preloader-voi-jquery

Xem Demo | Download

HTML

Để tạo hiệu ứng loading , chúng ta cần khung chuẩn html như sau :

<div id="preloader">
  <div id="status">&nbsp;</div>
</div>

CSS

Ngoài ra các bạn cũng cần chèn thêm đoạn css sau :

#preloader  {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fefefe;
     z-index: 99;
    height: 100%;
 }

#status  {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 50%;
     top: 50%;
     background-image: url(ajax-loader.gif);
     background-repeat: no-repeat;
     background-position: center;
     margin: -100px 0 0 -100px;
 }

jQuery

Và đây chính là tâm điểm của bài viết, các bạn sử dụng đoạn code jQuery sau :

// makes sure the whole site is loaded
jQuery(window).load(function() {
        // will first fade out the loading animation
	jQuery("#status").fadeOut();
        // will fade out the whole DIV that covers the website.
	jQuery("#preloader").delay(1000).fadeOut("slow");
})

Các bạn nhớ chia sẻ bài viết cho bạn bè và nếu có thắc mắc gì thì đừng ngần ngại để lại lời nhắn dưới dạng comment nhé.

Chúc các bạn thành công !

Chuyên Mục:

Bài viết được đăng bởi webmaster

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !
  • Nam Trà Phương

    Sao cái preloader này nó chỉ đứng ở một chỗ khi vào xong thôi chứ nó có trên screen khi đang load đâu?