Bài viết này hướng dẫn các bạn dùng jQuery để hiện thông báo tải trang. Thông báo này rất hữu ích trong trường hợp trang web của bạn khá lớn hoặc tốc độ mạng khá chậm, tao cảm giác dễ chịu và lầm tưởng web bạn tải bình thường.

Tạo hiệu ứng Chờ tải trang (Preload)

Xem demo Tải về

Mình sử dụng Glyphicon của Bootstrap và CSS3 để tạo biểu tượng tải trang. Bạn có thể dùng ảnh GIF, SVG hay bất kì thứ gì khác tùy ý.

HTML

Bạn cần thêm overflow: hidden; vào body để mất đi thanh cuộn trong trường hợp trang quá dài. Mình sử dụng class preloading.

<body class="preloading">
    <div id="preload" class="preload-container text-center">
        <span class="glyphicon glyphicon-repeat preload-icon rotating"></span>
    </div>
</body>

CSS

.preloading {
    overflow: hidden;
}
.preload-container {
    width: 100%;
    height: 100%;
    background: #ef6e7e;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 99999999999;
    display: block;
    padding-right: 17px;
    overflow-x: hidden;
    overflow-y: auto;
}
.preload-icon {
    font-size: 66px;
    color: #fff;
    margin-top: 20%;
}
@-webkit-keyframes {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 1.5s linear infinite;
  -moz-animation: rotating 1.5s linear infinite;
  -ms-animation: rotating 1.5s linear infinite;
  -o-animation: rotating 1.5s linear infinite;
  animation: rotating 1.5s linear infinite;
}

jQuery

Đây là phần quan trọng nhất, nhưng cũng dễ nhất, chúng ta dùng sự kiện $(window).load(); để nhận biết khi nào trang tải xong. Sau đó bỏ class preloading khỏi body và ẩn trang chờ đi.

$(window).load(function() {
    $('#preload').delay(1000).fadeOut('fast', function() {
        $('body').removeClass('preloading');
    });
});

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

5/5 (1 bình chọn)
Chia sẻ
Series: Thủ thuật Front-end