Html、Css、JavaScript制作圓形進度條的代碼及基礎分析

.說明：

推薦指數：★★★★

通俗易懂，小白一看就會，高手請飄過。

學python也是需要懂一點Html、Css、JavaScript的基礎知識的。

建議使用vscode編輯器。

2.效果圖1

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.效果圖

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 =，一個沒有，且只有$和小括號，因為外部的就是文件定義了一部分功能。

果圖

在渲染頁面的過程中，進度條是我們最為常見的，有條形進度條，圓環進度條，圓形進度條。今天，我們就來實現一下圓形進度條。

用到的知識點：

1、transform：rotate；（旋轉）

2、animation；（動畫關鍵幀）

首先，我們創建一個box，作為父級容器，定寬定高（160px），定位（position：relative）;

.box{

width: 160px;

height: 160px;

margin: 200px auto;

position: relative;

}

圓形進度條，分為左右兩部分，利用時間差，通過動畫關鍵幀來達到進度效果。

接下來，我們首先實現左側部分，創建一個div，類名為left-box，定寬定高（80px，160px）；定位（position：absolute）；

在left-box下創建一個div為子元素，類名為left-tran 和 left。接下來，設置left-tran樣式。

我們要明白，進度條的實現是通過時間差，改變邊框的顏色。通俗一點：就是一個div，width和height都為0px；邊框寬度設為100%；然后top和left為一組，bottom和right為一組，分別設置不同的顏色。效果如下圖：

接下來。將父級設置overflow：hidden。超出部分隱藏。這樣就只顯示一半的邊框，隨后便利用transform：rotate旋轉45deg，邊框邊圓角得到最終效果，如下圖：

最后設置關鍵幀，不同的邊框顏色就會相互轉變

這樣。左側的樣式就已經完成，右側的與之相似，這里，我們就不在這里多加描述。

待完成右側樣式，兩個關鍵幀動畫相互協調，就可以完成一個圓形進度條啦。

今天的全部代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 * {
 padding: 0px;
 margin: 0px;
 }
 .box {
 width: 200px;
 height: 200px;
 position: relative;
 margin: 100px auto;
 box-sizing: border-box;
 }
 .left-box{
 width: 100px;
 height: 200px;
 position: absolute;
 left: 0px;
 top: 0px;
 box-sizing: border-box;
 overflow: hidden;
 }
 .left-tran{
 width: 0px;
 height: 0px;
 border: 100px solid;
 box-sizing: border-box;
 transform: rotate(45deg);
 border-radius: 50%;
 
 }
 .left{
 border-left: 100px solid #e3e4e5;
 border-bottom: 100px solid #e3e4e5; 
 animation: leftmove 10s linear infinite;
 }
 @keyframes leftmove{
 0%{
 transform: rotate(45deg);
 }
 50%{
 transform: rotate(45deg);
 }
 100%{
 transform: rotate(225deg);
 }
 }
 .right-box{
 width: 100px;
 height: 200px;
 position: absolute;
 top: 0px;
 right: 0px;
 box-sizing: border-box;
 overflow: hidden;
 }
 .right-tran{
 width: 0px; 
 height: 0px;
 border: 100px solid;
 position: absolute;
 top: 0px;
 right: 0px;
 transform: rotate(45deg);
 border-radius: 50%;
 
 }
 .right{
 border-right: 100px solid #e3e4e5;
 border-top: 100px solid #e3e4e5;
 animation: rightmove 10s linear infinite;
 }
 @keyframes rightmove{
 0%{
 transform: rotate(45deg);
 }
 50%{
 transform: rotate(225deg);
 }
 100%{
 transform: rotate(225deg);
 }
 }
 
 </style>
</head>
<body>
 <div class="box">
 <div class="left-box">
 <div class="left-tran left"></div>
 </div>
 <div class="right-box">
 <div class="right-tran right"></div>
 </div>
 </div>
</body>
</html>

進度條，結合和時間戳，就可以很好的完成一個完美的時間進度條了。

希望今天的知識點對大家有所幫助。

niapp純CSS實現圓形進度條組件。圓形進度條組件組合做一個步驟進度組件是非常常見。

純 CSS 實現圓形進度條組件有以下幾個好處：

輕量級：由于純 CSS 實現，無需額外的 JavaScript 或圖像資源，所以組件的文件大小相對較小，加載速度快，對頁面性能的影響較小。

兼容性好：CSS 是 Web 標準的一部分，幾乎所有現代瀏覽器都支持 CSS。因此，純 CSS 實現的圓形進度條組件在各種設備和瀏覽器上都能正常顯示和運行。

可定制性強：CSS 提供了豐富的樣式屬性和選擇器，可以靈活地自定義圓形進度條的樣式、顏色、大小、動畫效果等，以滿足不同項目和設計需求。

簡單易用：純 CSS 實現的圓形進度條組件通常使用簡單，只需要在 HTML 中添加相應的 CSS 類或樣式即可，無需復雜的配置或調用 JavaScript 函數。

性能優化：由于純 CSS 實現的圓形進度條不涉及 JavaScript 的計算和操作，可以減輕客戶端的計算負擔，提高頁面的響應速度和性能。

<template>
<view class="flex align-center diygw-col-24 justify-center">
<view class="progress-circle " :class="'progress-'+innerPercent" :style="{
'--not-progress-color':notProgressColor,
'--bg-color':bgColor,
'--color':color,
'--progress-color':progressColor,
'--width':$u.addUnit(width),
'--font-size':$u.addUnit(fontSize),
'--border-width':$u.addUnit(borderWidth)
}">
<view class="inner">
<view class="progress-number">{{innerPercent}}%</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
width: {
type: Number,
default: 100
},
borderWidth: {
type: Number,
default: 20
},
bgColor: {
type: String,
default: '#fff'
},
notProgressColor: {
type: String,
default: '#ddd'
},
progressColor: {
type: String,
default: '#07c160'
},
color:{
type: String,
default: '#07c160'
},
fontSize:{
type: Number,
default: 24
},
/**
* 進度(0-100)
*/
percent: {
type: Number,
default: 0
},
/**
* 是否動畫
*/
animate: {
type: Boolean,
default: true
},
/**
* 動畫速率
*/
rate: {
type: Number,
default: 5
}
},
computed: {
/**
* @private
*/
complete() {
return this.innerPercent == 100
}
},
watch: {
percent(percent) {
this.setPercent()
}
},
data() {
return {
innerPercent: 0,
timeout: null
}
},
mounted() {
this.setPercent()
},
methods: {
setPercent() {
if (this.animate) {
this.stepTo(true)
} else {
this.innerPercent = this.percent
}
},
clearTimeout() {
clearTimeout(this.timeout)
Object.assign(this, {
timeout: null
})
},
stepTo(topFrame = false) {
if (topFrame) {
this.clearTimeout()
}
if (this.percent > this.innerPercent && !this.complete) {
this.innerPercent=this.innerPercent+1
}
if (this.percent < this.innerPercent && this.innerPercent > 0) {
this.innerPercent--
}
if (this.innerPercent !== this.percent) {
this.timeout = setTimeout(() => {
this.stepTo()
}, this.rate)
}
}
}
}
</script>
<style lang="scss" scoped>
.progress-circle {
--progress-color:#63B8FF;
--not-progress-color:#ddd;
--bg-color:#fff;
--width: 240rpx;
--border-width: 10rpx;
--color:#777;
--font-size:1.5rem;

$diythemeColor:var(--progress-color) ;
$diybackColor: var(--not-progress-color) ;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--width);
height: var(--width);
border-radius: 50%;
transition: transform 1s;
background-color: $diybackColor;
padding:var(--border-width);

.inner{
width:100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
z-index:1;
background-color: var(--bg-color);
}
&:before {
content: '';
left:0;
top:0;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $diythemeColor;
}

$step: 1;
$loops: 99;
$increment: 3.6;
$half: 50;

@for $i from 0 through $loops {
&.progress-#{$i * $step}:before {
@if $i < $half {
$nextDeg: 90deg+($increment * $i);
background-image: linear-gradient(90deg, $diybackColor 50%, transparent 50%, transparent), linear-gradient($nextDeg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);
}
@else {
$nextDeg: -90deg+($increment * ($i - $half));
background-image: linear-gradient($nextDeg, $diythemeColor 50%, transparent 50%, transparent), linear-gradient(270deg, $diythemeColor 50%, $diybackColor 50%, $diybackColor);
}
}
}

.progress-number {
width: 100%;
line-height: 1;
text-align: center;
font-size: var(--font-size);
color: var(--color);
}
}
</style>

在線咨詢

上一篇：用WebRTC和Node.js開發實時視頻聊天應用
下一篇：簡約優雅，這個開源項目讓你用 Deno 部署一個靜態網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Html、Css、JavaScript制作圓形進度條的代碼及基礎分析

1、transform：rotate；（旋轉）

2、animation；（動畫關鍵幀）

您的項目需求