洞悉互聯網前沿資訊,探尋網站營銷規律
作者:狐靈科技 | 2019-07-29 16:34 |點擊:
CSS代碼
.animationload {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #fff; /* change if the mask should have another color then white */z-index: 999999; /* makes sure it stays on top */}.loader {width: 200px;text-indent: -99999;height: 200px;font-size: 0;position: absolute;left: 50%; /* centers the loading animation horizontally one the screen */top: 50%; /* centers the loading animation vertically one the screen */background-image: url(../images/loading.gif); /* path to your loading animation */background-repeat: no-repeat;background-position: center;margin: -100px 0 0 -100px; /* is width and height divided by two */}
JS代碼:
// Page Preloader$(window).load(function() {$(".loader").delay(300).fadeOut();$(".animationload").delay(600).fadeOut("slow");});
HTML代碼:
自己把CSS代碼中的圖片路徑改成你自己的即可 一般把loading代碼放到網站的頭部<div class="animationload"><div class="loader">玩命加載中...</div></div>