先上效果
当项目中需要展示环形进度条时，可以采取以下几种方式
-
导入组件库。使用element UI 也有环形进度条，但是缺点就是样式不好修改，还需要引入组件。
2导入图片
可以把进度条动态图做成gif，项目中直接导入。缺点：不可以更改进度大小，图片加载太大，占用空间。
3使用svg 手绘
html:
<div class="circle">
<svg class="pro-svg"> <circle class="circle" cx="45" cy="45" r="44" fill="none" stroke-width="4" :stroke-dashoffset="loadingProgress" ></circle> </svg>
</div>
.circle {
stroke: #fcb718; stroke-width: 4; stroke-dasharray: 275;stroke-linecap: round;
}
参数说明
cx:所画得圆心x轴距离父元素得位置
cy:所画得圆心y轴距离父元素得位置
r: 半径长度
fill:实心圆?
stroke-width:环形宽度
下面时最重要得两个参数！！！
stroke-dasharray：为图案范式，表示为线段与缺口得表现形式。如果你只是画一个进度条又不太理解其他形式得含义。你可以暂且理解为圆周长，可以理解为进度条底部得颜色得那一圈。
stroke-dashoffset：官方得解释为：指定了dash模式到路径开始的距离。简单得理解为偏移量。如果你简单得画一个进度条 就用 stroke-dasharray-(进度*stroke-dasharray)。
css中添加
transform: rotate(-180deg);
来调整唤醒进度条起点得方向。
写到这里，已经可以生成一个完整得进度条了.
下面来添加动态效果。
1使用动画来添加
animation: circle 3s 1; // 动画名称 持续时间 播放次数
//添加关键帧 最后一帧调制要展示得进度
@keyframes circle { 100% { stroke-dashoffset: 60 ; } }
2使用js动态添加
this.intervalFlag = setInterval(() => { this.loadingProgress -= 3; if (this.loadingProgress <= 60) { clearInterval(this.intervalFlag); } }, 10);
// stroke-dashoffset动态绑定为loadingProgress 。 loadingProgress 初始值为stroke-dashoffset。
设置定时器，随着时间慢慢减小。
这样就可以得到一个环形进度条了
