圆形百分比进度条效果
Posted 哩个啷个波
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了圆形百分比进度条效果相关的知识，希望对你有一定的参考价值。
一、前言
前段时间我有个页面需要该效果，就在网上看了下，实现方式有好几种，我找了一种比较好实现的给大家一步步讲解。
先放效果图：
参考别人的链接：HTML+CSS 实现环形比例图效果
二、整体思路
1.设置一个浅灰色的圆当背景，里面只有两个子元素，
一个在右侧的浅蓝色半圆，一个小一点的白色圆在中间做遮罩以及显示文字。
<div class="bg">
<div class="circle-right"></div>
<div class="text">%</div>
</div>
1234
2.当进度小于等于50%时，往右侧浅蓝色的半圆里添加一子元素，是个填充满它的灰色半圆，
根据进度的值对该灰色半圆进行顺时针旋转，就会显示出代表进度的浅蓝色。
圆一圈是360度，我们这里的满进度是100，
那当进度为10%时，就让灰色半圆顺时针旋转36度，就可以显示出36度范围的浅蓝色。
<div class="bg">
<div class="circle-right">
<div class="mask-right" ></div>
</div>
<div class="text">10%</div>
</div>
123456
3.当进度大于50时，往右侧浅蓝色半圆后面添加一个元素，是个左侧的浅蓝色半圆，
该左侧半圆里包含一子元素是个填充满它的灰色半圆，于是左侧展示的效果是灰色半圆。
右侧浅蓝色半圆代表进度50，剩下的进度则是左侧半圆里灰色半圆的顺时针旋转度数，来展示剩下的浅蓝色进度。
例如当进度为60%时，右侧不动，左侧半圆里灰色半圆顺时针旋转36度，来展示36度范围的浅蓝色。
<div class="bg">
<div class="circle-right"></div>
<div class="circle-left">
<div class="mask-left" ></div>
</div>
<div class="text">60%</div>
</div>
1234567
三、完整案例
通过上面的介绍，我想大家对这个实现的流程已经有了思路，现在我放出完整的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());
//当百分比小于等于50
if(value <= 50)
var html = \'\';
html += \'<div class="mask-right" ></div>\';
//元素里添加子元素
$(\'.circle-right\').append(html);
else
value -= 50;
var html = \'\';
html += \'<div class="circle-left">\';
html += \'<div class="mask-left" ></div>\';
html += \'</div>\';
//元素后添加元素
$(\'.circle-right\').after(html);
)
</script>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
四、添加过渡
在完成我们要的效果后，我们可以给它添加一个过渡的效果，我这里是用计时器来完成的，过渡的其实不是很自然，大家也可以用其他的方式来实现。
<!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();
//当百分比小于等于50
if(value <= 50)
var html = \'\';
html += \'<div class="mask-right" ></div>\';
//元素里添加子元素
$(\'.circle-right\').append(html);
else
value -= 50;
var html = \'\';
html += \'<div class="circle-left">\';
html += \'<div class="mask-left" ></div>\';
html += \'</div>\';
//元素后添加元素
$(\'.circle-right\').after(html);
)
</script>
</body>
</html>
五、第二种实现方式
使用的是canvas标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas 圆形进度条并显示数字百分比</title>
<style>
*margin:0;padding:0;
bodytext-align:center;background-color:#000;
</style>
</head>
<body>
<canvas id="canvas" ></canvas>
<script>
window.onload = function()
var canvas = document.getElementById(\'canvas\'), //获取canvas元素
context = canvas.getContext(\'2d\'), //获取画图环境，指明为2d
centerX = canvas.width/2, //Canvas中心点x轴坐标
centerY = canvas.height/2, //Canvas中心点y轴坐标
rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
speed = 0.1; //加载的快慢就靠它了
//绘制5像素宽的运动外圈
function blueCircle(n)
context.save();
context.strokeStyle = "#55ffff"; //设置描边样式
context.lineWidth = 10; //设置线宽
context.beginPath(); //路径开始
context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
context.stroke(); //绘制
context.closePath(); //路径结束
context.restore();
//绘制白色外圈
function whiteCircle()
context.save();
context.beginPath();
context.lineWidth = 10; //设置线宽
context.strokeStyle = "darkslategrey";
context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
context.stroke();
context.closePath();
context.restore();
//百分比文字绘制
function text(n)
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "#ffffff"; //设置描边样式
context.font = "40px"; //设置字体大小和字体
//绘制字体，并且指定位置
context.strokeText("49%", centerX-25, centerY+40);
context.stroke(); //执行绘制
context.restore();
//百分比文字绘制
function text1(n)
context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
context.strokeStyle = "#ffffff"; //设置描边样式
context.font = "20px"; //设置字体大小和字体
//绘制字体，并且指定位置
context.strokeText("进度条显示", centerX-45, centerY+20);
context.stroke(); //执行绘制
context.restore();
//动画循环
(function drawFrame()
window.requestAnimationFrame(drawFrame);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(50);
text1();
blueCircle(50);
// if(speed > 100) speed = 0;
// speed += 0.1;
());
</script>
</body>
</html>
怎样用div实现带百分百环形进度条
html5+javascript 实现的圆形进度条，应该符合你要求
源代码 ： http://blog.csdn.net/tangdou5682/article/details/52778766
参考技术A 1、html5直接就可用css3的属性去做圆形，border-radius即可实现圆角。 2、图片形式，左右两侧做圆角图片，衔接好，即可实现，但右侧的需要在技术时进行变化 3、背景形式，做左右两侧背景色+圆角png透明背景，背景采用颜色填充即可。 4、采用插件...以上是关于圆形百分比进度条效果的主要内容，如果未能解决你的问题，请参考以下文章