前端页面loading效果(CSS实现)
当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差。所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可。
1. 方法
html:
在页面开头部分加入:
<div id="loading">
<div class="loadingImage"></div>
</div>
js:
在页面最后面引入:
$("#loading").fadeOut(400);
css:
#loading {
background: #f3815e;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 999;
}
.loadingImage {
position: relative;
width: 30px;
height: 30px;
background: #2e98df;
border-radius: 50px;
animation: loadingImage 1.5s infinite linear;
}
.loadingImage::after {
position: absolute;
width: 50px;
height: 50px;
border-top: 10px solid #b160d1;
border-bottom: 10px solid #b160d1;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-radius: 50px;
content: '';
top: -20px;
left: -20px;
animation: loadingImage_after 1.5s infinite linear;
}
@keyframes loadingImage {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
background: #2ecc71;
}
100% {
transform: rotate(360deg);
}
}
@keyframes loadingImage_after {
0% {
border-top: 10px solid #b160d1;
border-bottom: 10px solid #b160d1;
}
50% {
border-top: 10px solid #2e98df;
border-bottom: 10px solid #2e98df;
}
100% {
border-top: 10px solid #b160d1;
border-bottom: 10px solid #b160d1;
}
}