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

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.

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  {
     awidth: 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: Javascript

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