svg的圆形进度条

时间：2022-03-09 08:08:02

 目前发现svg实现一些动画效果是比较高效简单的。

如圆形进度条，只要会stroke-dasharray与stroke-dashoffset属性基本就可以实现，而且美观。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .svg{
        transform: rotate(-90deg);
    }
    .t1{
        stroke-dashoffset:0px;
        animation: donut-show-one linear 5s forwards;
    }
    @keyframes donut-show-one {
        from{
        stroke-dashoffset: 0px;
        }
        to {
        stroke-dashoffset: -565px;
      }
    }
    </style>
</head>
<body>
    <svg width="300px" height="300px" class="svg">
        <circle id="donut-graph" class="t2" r="90" cy="150" cx="150" stroke-width="4" stroke="#000" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
        <circle id="donut-graph" class="t1" r="90" cy="150" cx="150" stroke-width="4" stroke="#666" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dasharray="565" />  
    </svg>
</body>
</html>

stroke-dasharray是实线长度与实线之间距离的设置值，当一个为一个值是就是同等值，就是实线与间隙同等长。

stroke-dashoffset这是偏移值。

这两个值如果一起使用在stroke-dasharray为圆的周长时而stroke-dashoffset动态设置值，那么就会出现圆的进度条的效果。

 

资料1

　　

 

标签：

相关文章