Cách tạo hiệu ứng load trang cho website WordPress

MỤC LỤC BÀI VIẾT

Hiệu ứng load trang hay chờ tải trang là hiệu ứng được tạo ra, khi người dùng truy cập vào trang web, sẽ có một màn hình hiển thị có thể là hình ảnh, text, hay một hiệu ứng xoang tròn đẹp mắt, báo hiệu trang web đang được tải và bạn phải chờ đợt để trang web tải xong mới có thể xem được nội dung.

caodem hinh anh cach tao hieu ung load trang cho website wordpress x

Cách để tạo ra hiệu ứng load trang, chờ tải trang cho website WordPress

Demo: Bạn có thể tải lại trang chủ của Cáo Đêm để có thể xem được demo nhé.

Code tạo hiệu ứng load trang cho website WordPress

Đầu tiên bạn sao chép toàn bộ code bên dưới, sau đó dán vào cuối cùng của file footer.php nằm trong như mục theme mà bạn đang sử dụng là xong.

&lt;!-- hieu ung load tai trang Blog AZ9s ---&gt;
&lt;script&gt;
jQuery('body').append('&lt;div style="" id="loadingDiv"&gt;&lt;div class="loader"&gt;&lt;/div&gt;&lt;/div&gt;');
jQuery(window).on('load', function(){
setTimeout(removeLoader, 200);
});
function removeLoader(){
jQuery( "#loadingDiv" ).fadeOut(200, function() {
jQuery( "#loadingDiv" ).remove();
});
}
&lt;/script&gt;
&lt;style&gt;
#loadingDiv{background:#000000c1;width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999999999999}
.loader{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -50px 0 0 -50px;
border: 16px solid #fff0;
border-radius: 50%;
border-top: 16px solid #ff4444;
-webkit-animation: spin 2s linear infinite;
animation: spin 0.1s linear infinite;
background:#fff0;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}


.animate-bottom {
position: relative;
-webkit-animation-name: animatebottom;
-webkit-animation-duration: 1s;
animation-name: animatebottom;
animation-duration: 1s
}

@-webkit-keyframes animatebottom {
from { bottom:-100px; opacity:0 }
to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
from{ bottom:-100px; opacity:0 }
to{ bottom:0; opacity:1 }
}
&lt;/style&gt;

jQuery('body').append('<div style="" id="loadingDiv"><div class="loader"></div></div>');

jQuery(window).on('load', function(){

setTimeout(removeLoader, 200);

});

function removeLoader(){

jQuery( "#loadingDiv" ).fadeOut(200, function() {

jQuery( "#loadingDiv" ).remove();

});

}

</script>

<style>

#loadingDiv{background:#000000c1;width:100%;height:100%;position:fixed;top:0;left:0;z-index:9999999999999}

.loader{

position: absolute;

left: 50%;

top: 50%;

z-index: 1;

width: 120px;

height: 120px;

margin: -50px 0 0 -50px;

border: 16px solid #fff0;

border-radius: 50%;

border-top: 16px solid #ff4444;

-webkit-animation: spin 2s linear infinite;

animation: spin 0.1s linear infinite;

background:#fff0;

}

@-webkit-keyframes spin {

0% { -webkit-transform: rotate(0deg); }

100% { -webkit-transform: rotate(360deg); }

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.animate-bottom {

position: relative;

-webkit-animation-name: animatebottom;

-webkit-animation-duration: 1s;

animation-name: animatebottom;

animation-duration: 1s

}

@-webkit-keyframes animatebottom {

from { bottom:-100px; opacity:0 }

to { bottom:0px; opacity:1 }

}

@keyframes animatebottom {

from{ bottom:-100px; opacity:0 }

to{ bottom:0; opacity:1 }

}

</style>

#ff4444 là mã màu đỏ, mình đặt mặc định cho hiệu ứng vòng load trang, bạn có thể sử dụng mã màu khác để thay thế.
Ở code trên có 2 giá trị có số 200 là thời gian để hiệu ứng load khi người dùng truy cập vào (nếu trang web của bạn có nội dung lớn, hiệu ứng này có thể sẽ load lâu hơn so với thời gian mà bạn đã đặt).

Chúc bạn thành công, nhớ tim cho mình nhé!

0/5 (0 Reviews)