Hiệu ứng chờ tải trang không có gì là mới mẻ cả và hiện nay rất nhiều trang web sử dụng. Mỗi trang đều sử dụng cho mục đích khác nhau mà một trong những nguyên do cần đưa hiệu ứng này vào là che đi phần khuyết điểm trong thời gian tải trang, bất kể thời gian tải bao lâu nếu thấy trang có hiện tượng bị giựt, bố cục hiển thị không đồng bộ ví dụ phần sau tải trước phần trước...
Hiểu theo cách đơn giản sẽ sử dụng hiệu ứng chờ tải trang làm che đi tất cả phần hiển thị trang web và chờ cho trang tải xong hiệu ứng sẽ tự động ẩn đi.
Đã gọi là hiệu ứng tất nhiên sẽ có 2 cách để tạo nhưng đều chung một nguyên lý: một là dùng file gif để làm hiệu ứng và hai là dùng animation css để làm hiệu ứng. Bài này mình sẽ sử dụng cách hai để trang không phải tải ảnh gif cho nhẹ, cách thực hiện như sau:
1. Code Css
#af-preloader{width:100%;height:100%;position:fixed;background-color:#fff;z-index:99999999;top:0;left:0}
.af-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.af-sp{width:42px;height:42px;clear:both;margin:20px auto}
.af-sp-wave{border-radius:50%;position:relative;opacity:1}
.af-sp-wave:before,.af-sp-wave:after{content:'';border:2px #33b5e5 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}
.af-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}
.af-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}
@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}
@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}
@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
2. Code Html
Code này chèn ngay dưới thẻ <body>
<div id='af-preloader'>
<div class='af-preloader-wrap'>
<div class='af-sp af-sp-wave'></div>
</div>
</div>
3. Code Script
Phần này có thể sử dụng javascript hoặc jquery nếu trong theme đã có thư viện link jquery
- Code javascript
<script>//<![CDATA[
window.addEventListener('load', function() {
// document.querySelector('#af-preloader').style.display = 'none'
document.getElementById('af-preloader').style.display = 'none'
})
//]]></script>
- Code jquery
<script>//<![CDATA[
$(window).on('load', function() {
$('#af-preloader').delay(500).fadeOut('slow')
})
//]]></script>
