先看效果图
html部分
<div class="loaderBox" >
<div class="loaderMain">
<div class="shu">加载中...</div>
<div class="loader"></div>
</div>
</div>
css部分
/* 加载中样式 */
.loaderBox {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 4;
display: flex;
justify-content: center;
align-items: center;
}
.loader {
font-size: 10px;
text-indent: -9999em;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
border-bottom: 5px solid #fff;
border-left: 5px solid #4278be;
-webkit-animation: load 1.1s infinite linear;
animation: load 1.1s infinite linear;
z-index: 5;
position: relative;
}
.shu {
position: absolute;
top: 50%;
left: 50%;
font-size: 12px;
font-weight: bold;
color: #000000;
transform: translate(-50%, -50%);
}
.loader,
.loader:after {
border-radius: 50%;
width: 60px;
height: 60px;
}
@-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
这样就实现了一个简单的加载动画