Html,Css,JavaScript制作圆形进度条的程序及基础解析

感谢参考原文-http://bjbsair.com/2020-04-01/tech-info/18326.html

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.拆分法：把一个含有css和js（JavaScript）的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可以指定文件夹。

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload =，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。感谢参考原文-http://bjbsair.com/2020-04-01/tech-info/18326.html

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

1.说明：

推荐指数：★★★★

通俗易懂，小白一看就会，高手请飘过。

学python也是需要懂一点Html、Css、JavaScript的基础知识的。

建议使用vscode编辑器。

Html、Css、JavaScript制作圆形进度条的代码及基础分析

2.效果图1

Html、Css、JavaScript制作圆形进度条的代码及基础分析

3.代码：保存为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>  
			<!--100%是显示百分数，动态显示由0~100-->  
			<div class="text">100%</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" 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>

4.1 cirbar1.html的代码：

<!DOCTYPE html>  
<html>  
	<head>  
		<meta charset="UTF-8">  
		<title>圆形百分比进度条效果v2</title>  
		<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->  
		<!--style type="text/css"-->  
		<link href="./cirbar1.css" rel="stylesheet" />  
	</head>  
	<body>  
		<div class="bg">  
			<div class="circle-right"></div>  
			  
			<div class="text">100%</div>   
		</div>  
		<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->  
		<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>  
        <!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->  
		<!--script type="text/javascript"-->  
		<script src="./cirbar1.js"></script>  
	</body>  
</html>

4.2 cirbar1.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;  
		}

4.3 cirbar1.js的代码：

 $(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" 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);  
					}  
				}  
			})

==============================

再来一个，不用外部js文件的圆形进度条

顺带回顾一下相关知识。

==============================

5.效果图

Html、Css、JavaScript制作圆形进度条的代码及基础分析

6.三个文件，放在同一个文件夹中

6.1 cirbar.html代码：

<!--第1步---声明html5-->  
<!DOCTYPE html>   
  
<!--第2步---html大框架-->  
<html lang="en">  
  
<!--第2-1步---head部分-->  
<head>  
    <!--第2-1-1步---meta部分：声明字符编码格式：utf-8-->  
    <!--注意与python的第一行声明一样：# -*- coding: utf-8 -*-->  
    <meta charset="utf-8" />  
    <!--第2-1-2步---标题名称-->  
    <title>圆形进度条v1</title>  
    <!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->  
    <!--第2-1-3步---导入css文件-->  
    <link href="./cirbar.css" rel="stylesheet" />  
</head>  
  
<!--第2-2步---body部分-->  
<body>  
    <!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->  
    <canvas class="canvas" id="canvas" width="400" height="400"></canvas>  
    <!--第2-2-2步---导入js文件部分-->  
    <script src="./cirbar.js"></script>  
  
<!--注意收尾-->  
</body>  
<!--注意收尾-->  
</html>

6.2 cirbar.css代码：

.canvas {  
            /*画布的背景颜色设置为：黑色*/  
            background:#303030;  
              
        }

6.3 cirbar.js代码：

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; //加载的快慢就靠它了  
            //绘制红色外圈  
            function blueCircle(n) {  
                context.save();  
                context.strokeStyle = "	#1E90FF"; //随百分数转动的外圈的颜色为蓝色  
                context.lineWidth = 3; //设置线宽  
                context.beginPath(); //路径开始  
                //注意-为顺时针，+为逆时针  
                //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)  
                //context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);   
                context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);   
                context.stroke(); //绘制  
                context.closePath(); //路径结束  
                context.restore();  
            }  
            //绘制白色外圈，初始的白色外圈  
            function whiteCircle() {  
                context.save();  
                context.beginPath();  
                // 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样  
                //context.strokeStyle = "#F8F8FF";  
                context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);  
                context.stroke();  
                context.closePath();  
                context.restore();  
            }  
            //百分比文字绘制  
            function text(n) {  
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素  
                context.strokeStyle = "#7FFF00";//设置中间动态百分数的颜色  
                context.font = "25px Arial"; //设置字体大小和字体  
                context.textAlign = 'center';//字体水平居中  
                context.textBaseline = 'middle';//字体垂直居中  
                //绘制字体，并且指定位置  
                context.strokeText(n.toFixed(0) + "%", centerX, centerY);  
                context.stroke(); //执行绘制  
                context.restore();  
            }  
            //循环获取  
            (function drawFrame() {  
                window.requestAnimationFrame(drawFrame, canvas);  
                context.clearRect(0, 0, canvas.width, canvas.height);  
                whiteCircle();  
                text(speed);  
                blueCircle(speed);  
                if (speed < 100) {  
                    //1可从后台获取值,也是从0~100，step为1，代表速度  
                    speed += 1;  
                }  
            }());  
        }

注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload =，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。

Html,Css,JavaScript制作圆形进度条的程序及基础解析

猜你喜欢