html:
<div class="d-loading" id="loading">
<div class="d-loadVpic">
<div class="d-opctv"></div>
<div class="d-innervpic"></div>
<div class="d-loadmesg">
<span class="d-toladmsg">加载中</span>
<span class="d-load">.</span><span class="d-load">.</span><span class="d-load">.</span><span
class="d-load">.</span><span class="d-load">.</span> <span class="d-load">.</span>
</div>
<div class="d-progress" id="progress">0%</div>
</div>
</div>
css:
.d-loading{
.pos(f);
.wh(100%,100%);
left: 0;
top: 0;
z-index: 9999;
background: linear-gradient(180deg,#001913, #013125, #013125,#001913 100%);
-webkit-background: linear-gradient(180deg,#001913, #013125, #013125,#001913 100%);
.overh;
.d-loadVpic{
.pos(f);
background: url(css/898a3d0fa4844dabb6e725dffe90fa9f.png) no-repeat scroll center top / 100% auto;
.whlt(100vw,122vw,50%,50%);
.transform(translate(-50%,-50%));
.d-opctv{
background: url(css/c68a7efe5dee4354974d1fb32dc574a6.png) no-repeat scroll center top / 100% auto;
.whlt(26.2667vw,17.6vw,45.4667vw,37.8667vw);
.pos(a);
}
.d-innervpic{
background: url(css/b79999e135bc44b8b8edee8f476bf51c.png) no-repeat scroll center top / 100% auto;
.whlt(13.0667vw,6.1333vw,51.2vw,44.4vw);
.pos(a);
opacity: 0.5;
.animationSpedTwo(loadocy,0.8s,0s,linear,infinite,alternate,forwards);
}
.d-loadmesg{
.pos(a);
top: 61vw;
left: 42vw;
.tc;
color:#dcb36c;
.fz(0.12rem);
.d-load{
.fz(0.26rem);
.dib;
.animationSped(ballBeat,0.7s,0s,linear,infinite,forwards);
}
.d-load:nth-child(2n-1){
animation-delay: 0.35s !important;
-webkit-animation-delay: 0.35s !important;
}
}
.d-progress {
color: #fff;
text-align: center;
position: relative;
top: 71vw;
}
}
}
JS:
let initPros = 0 // 初始化进度
let timer = 0;
loadProgrsEvent([80, 90], [1, 3], 100)
window.onload = () => {
loadProgrsEvent(100, [1, 5], 10, () => {
window.setTimeout(() => {
$('#loading').addClass('dn');
$('#content').removeClass('dn');
}, 100)
})
}
function loadProgrsEvent(target, speed, timelag, callback) {
let targets = random(target);
let speeds = random(speed);
let timelags = random(timelag);
window.clearInterval(timer);
timer = window.setInterval(() => {
if (initPros + speeds >= targets) {
window.clearInterval(timer);
initPros = targets;
callback && callback();
} else {
initPros += speeds
loadProgrsEvent(target, speeds, timelags, callback);
}
$('#progress').html(parseInt(initPros) + '%');
}, timelags);
}
function random(n) {
if (typeof n === 'object') {
let times = n[1] - n[0]
let offset = n[0]
return Math.random() * times + offset
} else {
return n
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)