本篇文章给大家详细介绍一下如何用svg去开发一个环形进度条vue2组件,希望对大家有所帮助!

普通的矩形进度条我们通过div+css很容易就可以实现,而环形的就有点麻烦,当然他也可以用div+css通过背景属性或者clip属性配合css3变量做障眼法去实现,但是过于复杂而且兼容和控制起来都比较麻烦,所以,达到最佳效果我们还是去使用svg实现吧。【相关推荐:《vue.js教程》】
我们先康康最后完成的效果吧:

立即学习“前端免费学习笔记(深入)”;
开发自己组件好处就是,里面的大小,颜色,粗细,动画等等都可以任意扩展,准备好了么,马上要开始啦~
正文
1.传参与计算
相信大家通过上面的注释怎么开发就会猜的八九不十,我们的这个组件可以设置大小,边框粗细,进度条颜色,和后面要多久从0呈现出进度值的动画时长。至于计算属性,会在后面绘制svg的时候,根据注释一一对应不难看出来目的。
2.结构与样式
{{countDown}}%
其实这个很简单就是用svg写两个圆环,第一作为灰色底圆,第二个就是我们的进度条了,设置好大小圆心半径边框色,而且我们要把填充色变为同名,都写完了剩下两项stroke-dasharray和stroke-dashoffset,相信大家都会猜的到了,svg进度条变化核心就是这两个属性,刚刚计算属性也算出来了,分别就是圆环的周长和当前进度的长度。我们利用当前进度值来计算百分比占当前的长度,实现环形进度条的变化,就是这么简单。
然后我们还要写一丢丢css,而且是必须写,因为svg圆环不是从我们认为的0度开始,而是偏移了90度。

所以我们要用css再给他转过90度来!
.circle {
transform: rotate(-90deg);
}然后我们顺便写好文字和主框的一些样式。
.circle-main-box {
position: relative;
display: block;
margin: 0 auto;
}
.count-num {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
align-items: center;
justify-content: center;
display: flex;
font-family: fantasy;
font-size: 30px;
color: #333;
user-select: none;
}
这样我们就得到了一个静态的环形进度条了。
3.动画与使用










