实现圆形进度条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。

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

    <svg width="200" height="200">
      <circle
        id="progress"
        cx="100"
        cy="80"
        r="50"
        fill="#eee"
        stroke-width="5"
        stroke="#ff6600"
      />
    </svg>

image.png

设置stroke-dasharray和stroke-dashoffset

    <svg width="200" height="200">
      <circle
        id="progress"
        cx="100"
        cy="80"
        r="50"
        fill="#eee"
        stroke-width="5"
        stroke="#ff6600"
        stroke-dasharray="314"
        stroke-dashoffset="314"
      />
    </svg>

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

image.png

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

stroke-dashoffset为300和157

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

// 将圆翻转90度，使进度条从顶部开始
<svg width="500" height="200" style="transform: rotate(-90deg)">
  <circle
    id="progress"
    cx="250"
    cy="80"
    r="50"
    fill="#eee"
    stroke-width="5"
    stroke="#ff6600"
    stroke-dasharray="314"
    stroke-dashoffset="314"
    />
</svg>
<style>
#progress{
  animation: circleProgress 2s infinite;
}
@keyframes circleProgress {
  0%{
    stroke-dashoffset: 314;
  }
  100%{
    stroke-dashoffset: 0;
  }
}
</style>

效果图

css实现

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

首先我们画两个半圆

<div class="progress">
  <div class="wrapper left">
    <div class="circle leftCircle"></div>
  </div>
  <div class="wrapper right">
    <div class="circle rightCircle"></div>
  </div>
</div>
<style>
.progress {
  margin: 40px;
  width: 200px;
  height: 400px;
  position: relative;
}
.wrapper {
  width: 200px;
  height: 200px;
  box-sizing: content-box;
  border: 1px solid #eee;
}
.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 5px solid transparent;
}
.rightCircle {
  border-top: 5px solid #ff6600;
  border-right: 5px solid #ff6600;
}
.leftCircle {
  border-bottom: 5px solid #53a333;
  border-left: 5px solid #53a333;
}
</style>

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

总结

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