加载页面可以平滑过渡网站资源文件加载中的过程,加入以下代码,使网站拥有加载效果
html
这个标签必须写在最前面,因为html按照顺序加载,如果不在最前面的话。会出现主页闪现之后再出现加载页面。
<div class="loading-panel" id="loading-panel">
<div class="loading-box">
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
<div class="thing"></div>
</div>
</div>
css
body{
overflow: hidden;
}
.loading-panel{
position: fixed;
z-index: 1000;
width: 100%;
height: 100%;
background:#1d1f20;
}
.loading-box {
height: 100px;
width: 100px;
position: relative;
top: calc(50% - 25px);
left: calc(50% - 25px);
perspective: 1000px;
}
.thing {
height: 50px;
width: 50px;
background-color: #E87722;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
}
.thing:nth-of-type(1) {
animation: bounce 0.5s ease-in-out infinite alternate, move 4s -1s infinite;
}
.thing:nth-of-type(2) {
animation: bounce 0.5s ease-in-out infinite alternate, move 4s -2s infinite;
}
.thing:nth-of-type(3) {
animation: bounce 0.5s ease-in-out infinite alternate, move 4s -3s infinite;
}
.thing:nth-of-type(4) {
animation: bounce 0.5s ease-in-out infinite alternate, move 4s -4s infinite;
}
@keyframes bounce {
from {transform: scale(1);}
to {transform: scale(0.8);}
}
.fadeout{
-webkit-transition: all 1.5s;
-moz-transition: all 1.5s;
-ms-transition: all 1.5s;
-o-transition: all 1.5s;
transition: all 1.5s;
opacity: 0;
}
.loaded{
display:none;
}
@keyframes move {
0% {
top: 0;
left: 0;
background-color: #E87722;
}
25% {
top: 0;
left: 50%;
background-color: #A4D65E;
}
50% {
top: 50%;
left: 50%;
background-color: #69B3E7;
}
75% {
top: 50%;
left: 0;
background-color: #FFC845;
}
}
js
为了实现加载完成之后移除加载效果
const preloader = {
endLoading: () => {
document.body.style.overflow = 'auto';
document.getElementById('loading-panel').classList.add("fadeout")
setTimeout(() => {
document.getElementById('loading-panel').classList.add("loaded")
}, "1000")
},
initLoading: () => {
document.body.style.overflow = '';
document.getElementById('loading-panel').classList.remove("loaded")
}
}
window.addEventListener('load',()=> { preloader.endLoading() })