使用 svg + css 制作圆环loading动效

转载自：https://www.jianshu.com/p/62696f058463

html

<svg class="load" viewBox="25 25 50 50">
    <circle class="loading" cx="50" cy="50" r="20" fill="none" />
</svg>

css

.load {
    width: 80px;
    height: 80px;
}
.loading {
    stroke: rgb(53, 157, 218);
    stroke-width: 5;
    stroke-linecap: round;
    fill: none;
}

/** 主动画 **/
@keyframes dash {
    0% {
        stroke-dasharray: 0, 200;
        stroke-dashoffset: 0;
    }
    20% {
        stroke-dasharray: 0, 200;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 130, 200;
        stroke-dashoffset: -120;
    }
}

.loading {
    stroke: rgb(53, 157, 218);
    stroke-width: 5;
    fill: none;
    -webkit-animation: dash 1.5s linear infinite;
    -o-animation: dash 1.5s linear infinite;
    animation: dash 1.5s linear infinite;
}

/** 旋转动画 **/
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.load {
    animation: rotate 2s linear infinite;
}