实现圆形进度条svg&css

在生活中比较常见的是直线进度条，但是圆形进度条的实现相对有意思，我个人总结了两种圆形进度条的实现方式。

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。

1. 先画出一个圆圈：代码如下，圆的半径设置为50

image.png

2. 设置stroke-dasharray和stroke-dashoffset

stroke-dasharray="2*50*3.14",代表虚线长314，空白间隔长314
stroke-dashoffset="2*50*3.14"，代表虚线偏移是314，这样展示出来的部分就是空白间隔。
将圆的周长展开来表示就是这样：

image.png

image.png

3. 现在只要改变stroke-dashoffset偏移的值，从314->0，那么就会慢慢将
   虚线的位置显示出来。

   
   
   stroke-dashoffset为300和157
   
   

   注意到他是从右侧中间开始显示的，这样我们可以加一个动画改变stroke-dashoffset的值。同样的，svg的直线进度条也可以这样处理。

// 将圆翻转90度，使进度条从顶部开始

效果图

css实现

用css实现主要通过用两个div分别画半圆，并结合overflow:hidden实现。

1. 首先我们画两个半圆

image.png

2. 将两个半圆旋转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

3. 最后添加先让右半圆旋转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

总结

以上就是我总结的两种画原型进度条的方法，挺有意思的吧？