加载圆环（纯CSS操作）
项目中需要自己制作一个加载的圆环 不使用任何JS，PC端和移动端都实用
<hgroup class="circle-load"> // 方便复用
<svg width="240px" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="110" cy="110" r="90" stroke-width="10" stroke="gainsboro" fill="none"></circle>
<circle cx="110" cy="110" r="90" stroke-width="10" stroke="darkturquoise" fill="none" class="circle-load-svg"></circle>
</svg>
</hgroup>
- 这一步制作了 两个园 重合一起 （最上面的圆环通过动画 模拟加载事件）
.circle-load {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} // 定位屏幕中心 位置 具体根据自己需要调整
.circle-load-svg {
stroke-dasharray: 0 570;
animation: rot 5s linear infinite;
} 调用SVG动画 实现加载效果
@keyframes rot {
100% {
stroke-dasharray: 570 570; // 改变 短线长度与 间隔长度
}
}
- 调用animation实现加载动画 ，可根据自己需求 更改 修改 度高
