圆形百分比进度条效果

一、前言

最近有点懈怠啊，没怎么整理发布博客。今天写篇文章和大家分享一个常用的效果，圆形百分比进度条。前段时间我有个页面需要该效果，就在网上看了下，实现方式有好几种，我找了一种比较好实现的给大家一步步讲解。

如果您觉得对您有帮助的话，请给我个赞或评论，谢谢~

先放效果图：

参考别人的链接：HTML+CSS 实现环形比例图效果

二、整体思路

1.设置一个浅灰色的圆当背景，里面只有两个子元素，
一个在右侧的浅蓝色半圆，一个小一点的白色圆在中间做遮罩以及显示文字。

<div class="bg"><div class="circle-right"></div><div class="text">%</div>
</div>

2.当进度小于等于50%时，往右侧浅蓝色的半圆里添加一子元素，是个填充满它的灰色半圆，
根据进度的值对该灰色半圆进行顺时针旋转，就会显示出代表进度的浅蓝色。
圆一圈是360度，我们这里的满进度是100，
那当进度为10%时，就让灰色半圆顺时针旋转36度，就可以显示出36度范围的浅蓝色。

<div class="bg"><div class="circle-right"><div class="mask-right" style="transform:rotate(36deg)"></div></div><div class="text">10%</div>
</div>

3.当进度大于50时，往右侧浅蓝色半圆后面添加一个元素，是个左侧的浅蓝色半圆，
该左侧半圆里包含一子元素是个填充满它的灰色半圆，于是左侧展示的效果是灰色半圆。
右侧浅蓝色半圆代表进度50，剩下的进度则是左侧半圆里灰色半圆的顺时针旋转度数，来展示剩下的浅蓝色进度。
例如当进度为60%时，右侧不动，左侧半圆里灰色半圆顺时针旋转36度，来展示36度范围的浅蓝色。

<div class="bg"><div class="circle-right"></div><div class="circle-left"><div class="mask-left" style="transform: rotate(36deg);"></div></div><div class="text">60%</div>
</div>

三、完整案例

通过上面的介绍，我想大家对这个实现的流程已经有了思路，现在我放出完整的demo给大家，直接复制就可以看到效果：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>圆形百分比进度条效果</title><style type="text/css">*{margin: 0;padding: 0;}.bg{width: 200px;height: 200px;border-radius: 100%;background: #ccc;position: relative;margin: 20px auto;}.circle-right, .circle-left, .mask-right, .mask-left{width: 200px;height: 200px;border-radius: 100%;position: absolute;top: 0;left: 0;}.circle-right, .circle-left{background: skyblue;}.mask-right, .mask-left{background: #ccc;}.circle-right, .mask-right{clip: rect(0,200px,200px,100px);}.circle-left, .mask-left{clip: rect(0,100px,200px,0);}.text{width: 160px;height: 160px;line-height: 160px;text-align: center;font-size: 34px;color: deepskyblue;border-radius: 100%;background: #fff;position: absolute;top: 20px;left: 20px;}</style></head><body><div class="bg"><div class="circle-right"></div><div class="text">90%</div></div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$(function(){//获取百分比值var value = parseInt($('.text').html());//当百分比小于等于50if(value <= 50){var html = '';html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';//元素里添加子元素$('.circle-right').append(html);}else{value -= 50;var html = '';html += '<div class="circle-left">';html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';html += '</div>';//元素后添加元素$('.circle-right').after(html);}})</script></body>
</html>

四、添加过渡

在完成我们要的效果后，我们可以给它添加一个过渡的效果，我这里是用计时器来完成的，过渡的其实不是很自然，大家也可以用其他的方式来实现。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>圆形百分比进度条效果</title><style type="text/css">*{margin: 0;padding: 0;}.bg{width: 200px;height: 200px;border-radius: 100%;background: #ccc;position: relative;margin: 20px auto;}.circle-right, .circle-left, .mask-right, .mask-left{width: 200px;height: 200px;border-radius: 100%;position: absolute;top: 0;left: 0;}.circle-right, .circle-left{background: skyblue;}.mask-right, .mask-left{background: #ccc;}.circle-right, .mask-right{clip: rect(0,200px,200px,100px);}.circle-left, .mask-left{clip: rect(0,100px,200px,0);}.text{width: 160px;height: 160px;line-height: 160px;text-align: center;font-size: 34px;color: deepskyblue;border-radius: 100%;background: #fff;position: absolute;top: 20px;left: 20px;}</style></head><body><div class="bg"><div class="circle-right"></div><div class="text">10%</div></div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">$(function(){              //获取百分比值var num = parseInt($('.text').html());//通过计时器来显示过渡的百分比进度var temp = 0;var timer = setInterval(function(){calculate(temp);//清除计时器结束该方法调用if(temp == num){clearInterval(timer);}temp++;},30)//改变页面显示百分比function calculate(value){//改变页面显示的值$('.text').html(value + '%');//清除上次调用该方法残留的效果$('.circle-left').remove();$('.mask-right').remove();//当百分比小于等于50if(value <= 50){var html = '';html += '<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';//元素里添加子元素$('.circle-right').append(html);}else{value -= 50;var html = '';html += '<div class="circle-left">';html += '<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';html += '</div>';//元素后添加元素$('.circle-right').after(html);}}})</script></body>
</html>