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!
Nguyễn Quang Cường
02/04/2020 lúc 23:01
Chỗ jquery thêm vào chỗ nào trong wordpress bạn nhỉ, mình thêm vào thẻ body nhưng vẫn không bắt sự kiện tải trang được
Admin
02/04/2020 lúc 23:37
WordPress mặc định nó có jQuery rồi á bạn, để chắc chắn bạn bỏ script này ở cuối cùng trước
</body>á.