CSS 实现加载圆环

加载圆环（纯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>

1. 这一步制作了 两个园 重合一起 （最上面的圆环通过动画 模拟加载事件）

.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; // 改变 短线长度与 间隔长度 
    }
}

2. 调用animation实现加载动画 ，可根据自己需求 更改 修改 度高