加載圓環(huán)（純CSS操作）
項目中需要自己制作一個加載的圓環(huán) 不使用任何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>
- 這一步制作了 兩個園 重合一起 （最上面的圓環(huán)通過動畫 模擬加載事件）
.circle-load {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} // 定位屏幕中心 位置 具體根據(jù)自己需要調(diào)整
.circle-load-svg {
stroke-dasharray: 0 570;
animation: rot 5s linear infinite;
} 調(diào)用SVG動畫 實現(xiàn)加載效果
@keyframes rot {
100% {
stroke-dasharray: 570 570; // 改變 短線長度與 間隔長度
}
}
- 調(diào)用animation實現(xiàn)加載動畫 孵滞，可根據(jù)自己需求 更改 修改 度高
