标签：rotate linear svg stroke dash 动效 animation infinite css

使用 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;
}

标签：rotate,linear,svg,stroke,dash,动效,animation,infinite,css
来源： https://www.cnblogs.com/CreateBox/p/15196450.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。