以下是一个简单的CSS loading样式,简单但是很实用哦~
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.loading::before {
content: "";
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
border: 5px solid #ccc;
border-top-color: #333;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
这个样式会在页面中心显示一个旋转的圆圈,表示正在加载。可以根据需要调整颜色、大小和动画速度等属性。
0 个评论