在生活中比较常见的是直线进度条，但是圆形进度条的实现相对有意思，我个人总结了两种圆形进度条的实现方式。
svg实现
首先我们得了解什么是svg，它是使用 XML 来描述二维图形和绘图程序的语言。可以直接在html中使用svg标签实现。实现圆形进度条前先讲下svg里面stroke属性。
- stroke：轮廓填充什么颜色
- stroke-width：轮廓宽度
- stroke-linecap：开放路径的终结形状，常用round，square，butt
- stroke-dasharray：创建虚线，一位表示长与虚线的间隔相同
stroke-dasharray = '10' //虚线长10，间距10，然后重复 虚线长10，间距10
stroke-dasharray = '10, 5' //虚线长10，间距5，然后重复 虚线长10，间距5
stroke-dasharray = '20, 10, 5' //虚线长20，间距10，虚线长5，接着是间距20，虚线10，间距5，之后开始如此循环
- stroke-dashoffset：相对于起始点的偏移，正数偏移x值的时候，相当于往左移动了x个长度单位，负数偏移x的时候，相当于往右移动了x个长度单位。
实现圆形进度条主要用到stroke-dasharray和stroke-dashoffset。
- 先画出一个圆圈：代码如下，圆的半径设置为50
image.png
- 设置stroke-dasharray和stroke-dashoffset
stroke-dasharray="2*50*3.14",代表虚线长314，空白间隔长314
stroke-dashoffset="2*50*3.14"，代表虚线偏移是314，这样展示出来的部分就是空白间隔。
将圆的周长展开来表示就是这样：
image.png
image.png
-
现在只要改变stroke-dashoffset偏移的值，从314->0，那么就会慢慢将
虚线的位置显示出来。
stroke-dashoffset为300和157
注意到他是从右侧中间开始显示的，这样我们可以加一个动画改变stroke-dashoffset的值。同样的，svg的直线进度条也可以这样处理。
// 将圆翻转90度，使进度条从顶部开始
效果图
css实现
用css实现主要通过用两个div分别画半圆，并结合overflow:hidden实现。
- 首先我们画两个半圆
image.png
- 将两个半圆旋转45度并合起来，设置overflow:hidden
.progress {
margin: 40px;
width: 200px;
height: 400px;
position: relative;
}
.wrapper {
width: 100px; // 修改
height: 200px;
box-sizing: content-box;
overflow: hidden; // 新增
position: absolute;
border: 1px solid #eee;
}
.right {
left: 100px;
}
.left {
left: 0;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid transparent;
position: absolute; // 新增
top: 0;
transform: rotate(45deg); // 新增
}
.rightCircle {
border-top: 5px solid #ff6600;
border-right: 5px solid #ff6600;
right: 0; // 新增
}
.leftCircle {
border-bottom: 5px solid #53a333;
border-left: 5px solid #53a333;
left: 0; // 新增
}
image.png
- 最后添加先让右半圆旋转180度，再让左半圆旋转180度即可。
.rightCircle {
border-top: 5px solid #ff6600;
border-right: 5px solid #ff6600;
right: 0;
animation: circleProgressLoad_right 5s linear infinite; // 新增
}
.leftCircle {
border-bottom: 5px solid #53a333;
border-left: 5px solid #53a333;
left: 0;
animation: circleProgressLoad_left 5s linear infinite; // 新增
}
@keyframes circleProgressLoad_right {
0% {
transform: rotate(45deg);
}
50%,
100% {
transform: rotate(225deg);
}
}
@keyframes circleProgressLoad_left {
0%,
50% {
transform: rotate(45deg);
}
100% {
transform: rotate(225deg);
}
}
效果图.gif
这是从100->0，如果是从0->100的话，只需要修改动画旋转角度即可。
.circle {
transform: rotate(-135deg); // 修改
}
@keyframes circleProgressLoad_right {
0% {
transform: rotate(-135deg);
}
50%,
100% {
transform: rotate(45deg);
}
}
@keyframes circleProgressLoad_left {
0%,
50% {
transform: rotate(-135deg);
}
100% {
transform: rotate(45deg);
}
}
效果图.gif
总结
以上就是我总结的两种画原型进度条的方法，挺有意思的吧？