团体思绪是：经由过程裁切（clip）发生两个半圆展示出静态的进度条，然后经由过程扭转（rotate）角度的变化发生动态结果。

先来回忆两个基本知识点

（1）css的一个不常见的属性：

clip: rect(top, right, bottom, left);

这个属性划定了一个裁切的矩形，个中top和bottom所指定的偏移量是从元素盒子顶部边沿算起，right和left所指定的偏移量是从元素盒子左侧边沿算起（这里须要重点注重的是bottom和right的盘算体式格局）。看下面这张超等清楚的图（直接把w3cplus的图搬过来了，带着水印不违规的吧？）：

须要注重的是：clip属性只能在元素设置了“position:absolute”或许“position:fixed”属性时起作用。clip没法在设置“position:relative”和“position:static”上事情。

关于clip，想要深切相识请看这篇文章: http://www.w3cplus.com/css3/c…

（2）CSS的另一个属性：

transform: rotate(deg);

顺时针扭转肯定的角度。

热身运动：我们来画一个右半圆

//html
<div class="pie-right">
    <div class="right"></div>
    <div class="mask"><span>0</span>%</div>
</div>
//css
.pie-right {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;//注重这是示意当前进度的色彩
}
.right {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: blue;//注重这个才不是当前进度的色彩
}
.pie-right, .right {
    clip: rect(0, auto, auto, 100px);
}
.mask {//我是遮罩
    position: absolute;
    top: 25px;
    left: 25px;
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
}

结果以下：

此时，元素pie-right完整被元素right遮住了。

然后，我们来扭转一下：

.right {
    transform: rotate(30deg);
}

扭转后结果以下：

如今我们能够看到，扭转了30度时，显露的赤色部份就是我们要的进度，这是pie-right元素的色彩。而蓝色部份right元素的色彩，是我们还未抵达的进度。

正式最先

完成环形进度条意味着我们须要摆布两个半圆，因而html构造要转变一下：

//html

<div class="circle">
    <div class="pie-right">
        <div class="right"></div>
    </div>
    <div class="pie-left">
        <div class="left"></div>
    </div>
    <div class="mask"><span>0</span>%</div>
</div>

//css
.circle {//这个元素能够供应进度条的色彩
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;//注重这是示意当前进度的色彩
}
.pie-right, .pie-left { //这俩元素重要是为了离别天生两个半圆的，所以起作用的处所在于clip裁掉另一半
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
}
.right, .left {
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: blue;//注重这个才不是当前进度的色彩
}
.pie-right, .right { //裁掉左侧一半
    clip: rect(0, auto, auto, 100px);
}
.pie-left, .left { //裁掉右侧一半
    clip: rect(0, 100px, auto, 0);
}
.mask {//我是遮罩 mask不必改 好欣喜
    position: absolute;
    top: 25px;
    left: 25px;
    height: 150px;
    width: 150px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
}

结果是介样滴：

此时进度是0，让我们来rotate一下，先扭转30度吧

.right{
    transform: rotate(30deg);
}

于是就变成了如许：【请一直记着，赤色部份是当前进度。】

然后再扭转210度看看结果【210度就是右侧完整扭转，左侧再扭转30度】：

.right{
    transform: rotate(180deg);
}
.left{
    transform: rotate(30deg);
}

长如许：

末了的末了，当进度数值动态增添时，经由过程js去转变扭转的角度就能够完成进度条动态变化了。
进度数值每增添1，角度增添3.6度，还要注重的是，当进度小于50%时，左侧进度条没有变化，当大于50%，左侧进度条才最先转变。
我们能够写一个函数:

function changeProcess(value) {
    var num = value * 3.6;
    if(num < 180) {
        $('.right').css('transform', 'rotate(' + num + 'deg)');
    } else {
        $('.right').css('transform', 'rotate(180deg)');
        $('.left').css('transform', 'rotate(' + (num-180) + 'deg)');
    }
}

当进度值变化时，挪用这个函数即可。

jsfiddle演示

勤劳的我去jsfiddle里写了一下（这个是jQuery的完成）：jsfiddle

这个是Vue的完成： Vue环形进度条。用到Vue的绑定内联款式。

参考文章：
应用jQuery和CSS完成环形进度条
https://www.w3cplus.com/css3/…