实现加载中css样式编写
时间: 2024-02-16 14:04:34 浏览: 21
以下是一个简单的加载中 CSS 样式编写示例:
```css
.loading {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.loading::after {
content: "";
display: block;
width: 60px;
height: 60px;
margin: 0 auto;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: loading-animation 1.2s linear infinite;
}
@keyframes loading-animation {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
```
这个样式会将一个 div 元素居中显示,覆盖整个页面,背景半透明黑色。div 元素的 ::after 伪元素被用来显示旋转的 loading 动画,通过 keyframes 实现。使用时,只需要在页面需要加载的时候加上这个 loading 样式即可。