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

天我們想向大家展示如何創建一些具有特殊3D外觀的純CSS進度條。不妨將本教程當作是一個高級的CSS練習，以更深入地了解更多有趣的3D屬性和著色技術。僅使用CSS創建UI組件將訓練你的創造性思維，并且在本教程中，我們將通過制作進度條并動畫化來向大家展示一些如何創建更復雜形狀的技巧。

注意：某些CSS屬性僅在現代瀏覽器中受支持。IE仍然不支持transform-style：preserve-3d，這是一個用于創建嵌套3D結構的關鍵屬性；所以進度條在IE瀏覽器中將是扁平/無效的。

瀏覽器支持：Chrome Firefox Internet Explorer Safari Opera

源碼下載(http://www.html5tricks.com/jquery-css3-3d-progress-bar.html)

我們將在本教程中使用Sass（與Compass一起使用），因此請確保設置并了解其基礎知識：

安裝Sass和Sass Basics
安裝Compass Stylesheet Authoring Framework和Compass CSS3

如果你想對動畫進度條使用完整的解決方案，那么你應該查看Kimmo Brunfeldt的ProgressBar.js或HubSpot的PACE，以獲得出色的頁面加載進度條。

為了生成所有必要的前綴，你可以使用像Autoprefixer或用于Sublime Text的插件。

我們將使用許多有趣的CSS屬性，如transform，perspective和box-shadow。我們還將大量使用SASS，以節省生成進度條的位置和外觀所需的很多時間。通過使用相對大小（em，百分比），我們可以確保進度條的大小易于調整。

構建面

我們先從構建一個包含所有六個面的框開始。這個框將作為我們的主要容器，用來設置進度條的尺寸及其視點。我們還將使用一個包裝器用于透視圖，并且這個包裝器的font-size屬性將允許使用某些em單位魔法的幫助來擴展進度條。

為了確保所有的面都是我們3D空間的一部分，我們需要將transform-style: preserve-3d應用于框。

所以讓我們從初始化一些顏色變量開始來編寫樣式吧：

$light-gray: #e0e0e0;
$magenta: #ec0071;
$white: #f5f5f5;

.perspective {
font-size: 5em; // sets the main scale size
perspective: 12em; // sets the perspective
perspective-origin: 50% 50%;
text-align: center;
}

.bar {
display: inline-block;
width: 1em;
height: 1em;
margin-top: 1em;
position: relative;
transform: rotateX(60deg); // sets the view point
transform-style: preserve-3d; // perspective for the children
}

現在，我們來看看這些面。如果我們想要能夠毫無困難地重新調整我們的主框，里面包含的面必須得像液體一樣具有流動行為以及具備絕對位置。

.bar {
// -> The SCSS written before
.bar-face {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: rgba($light-gray, .6); // just to see what is happening
}
}

寫標記并且確保它是可以訪問的：

<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
<div class="bar-face"/>
</div>
</div>

如果你有興趣了解更多有關可訪問性的信息，這篇文章（由Gez Lemon撰寫）幫助我了很多：‘Introduction to WAI ARIA’

設置面

這是非常重要的一部分。進度條的面必須準確定向，這樣當我們開始添加百分比填充時，就不會陷入困境。

.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
transform-origin: 50% 100%;
&.roof {
transform: translateZ(1em);
}
&.front {
transform: rotateX(-90deg);
}
&.right {
left: auto;
right: -.5em;
width: 1em;
transform: rotateX(-90deg) rotateY(90deg) translateX(.5em);
}
&.back {
transform: rotateX(-90deg) rotateY(0deg) translateZ(-1em);
}
&.left {
width: 1em;
transform: rotateX(-90deg)rotateY(-90deg) translateX(-.5em) translateZ(.5em);
}
}
}

<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof"/>
<div class="bar-face front"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back"/>
<div class="bar-face floor"/>
</div>
</div>

好的，這是一個很棒的立方體，但是我們要為進度條創建一個矩形。如果你還記得的話，我們已經用一種液體化的方法構建了面，所以如果我們只是增加.bar類的width，那么這樣就可以。在這個例子中，我們使用了4em的寬度。

構建百分比填充

百分比填充將包含在面內，并且，為了保持HTML代碼的最小化，我們將使用偽類:before。這樣生成的:before元素將顯示相對于面寬度的百分比。

.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
&.percentage:before {
content: '';
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 100%;
margin: 0;
background-color: rgba($magenta, .8);
transition: width .6s ease-in-out;
}
}
}

<div class="perspective">
<div class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face front percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
</div>
</div>

現在我們需要編寫百分比填充樣式。手動編寫一百個類將會非常繁瑣，所以讓我們寫一些可靠的循環來從HTML中獲取aria-valuenow屬性的所有值。

.bar {
// -> The SCSS from before
.bar-face {
// -> The SCSS from before
}

@for $i from 0 to 101 {
&[aria-valuenow='#{$i}'] {
.percentage:before {
width: $i * 1%;
}
}
}
}

如果你想立竿見影地看到成果，那么只需將HTML中的aria-valuenow屬性從0更改至100。

構建皮膚

為了構建皮膚，我們將使用Sass mixins。為了得到一個現實化的外觀，我們將使用box-shadow屬性。這個屬性支持一個數組的值，并且這個數組將允許我們模擬照明。我們將在這個屬性中包含地面陰影和面的采光。

@mixin build-skin($color, $name) {
&.#{$name} {
.floor {
box-shadow:
0 -0.2em 1em rgba(0,0,0,.15),
0 0.2em 0.1em -5px rgba(0,0,0,.3),
0 -0.75em 1.75em rgba($white,.6);
}
.left {
background-color: rgba($color, .5);
}
.percentage:before {
background-color: rgba($color, .5);
box-shadow: 0 1.6em 3em rgba($color,.25);
}

}

}
.bar {
// -> The SCSS from before
@include build-skin(#57caf4, 'cyan');
}

<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face front percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
</div>
</div>

此外，我們需要一個照亮面的技巧。如果我們以正確的順序輸入面的DOM節點，我們將看到奇跡：

<div class="perspective">
<div class="bar cyan" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face roof percentage"/>
<div class="bar-face back percentage"/>
<div class="bar-face floor percentage"/>
<div class="bar-face left"/>
<div class="bar-face right"/>
<div class="bar-face front percentage"/>
</div>
</div>

這里發生了什么？很簡單：當瀏覽器渲染一個絕對元素時，默認情況下它會添加一個自動遞增的z-index（如果我們不編輯此屬性的話）。所以，如果我們通過先放置底部的面來改變渲染順序，那么它的陰影就會覆蓋在背面的所有面上。這就是我們實現現實化陰影的原理。

關于如何實現進度條就都在這里了！現在，請查看所有DEMO演示和源代碼文件，然后開始構建皮膚來訓練自己此技能吧。

感謝各位的閱讀，希望本教程能對你有所幫助！

源自：www.codeceo.com/article/css3-sass-3d-progress-bar.html
聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。

多網頁為了提升用戶體驗，都會在頁面載入的時候有一個加載進度條的動畫效果，以此來提升用戶體驗。

比較知名的進度條庫有 NProgress，progressBar，progressJS 等等。使用方式也差不多，如下所示就是 NProgress 的使用方式：

NProgress.start();
NProgress.done();
NProgress.remove();

可以看到提供 start， done，remove 等方法，分別對應開始，完成和 刪除進度條容器，并且提供 set 方法可以設置進度條的加載速度等。

那么，有沒有辦法依據頁面加載的事件制作一個能較為準確表達加載進度的進度條呢？

其實是可以的。

首先來看網頁加載的事件有哪些（不考慮 IE 的 DOMContentLoaded）：

document.readystatechange 事件

readystatechange 會在每次 readyState 發生變化的時候觸發

readyState 有以下狀態：

uninitialized - 還未開始載入

loading - 載入中

interactive - 互動文檔已經完成加載，文檔已被解析，但是諸如圖像，樣式表和框架之類的資源仍在加載，文檔與用戶可以開始交互

complete - 載入完成

window.onload 事件

load 事件在 window，指的是網頁資源已經加載完畢（包括圖片、音頻、腳本、插件資源以及 CSS）

所有的資源全部加載完成后會觸發 window 的 load 事件。

通俗一點地說：

document.readystatechange 事件會觸發多次。
當 Dom Tree 生成完畢那么 document.readyState 狀態翻轉為 complete
當網頁所有資源加載完畢 window.onload 觸發

但是由于當前頁面加載時候，document.readyState 的 uninitialized 和 loading 這2個狀態是無法捕獲的。因為 Dom Tree 還未生成，JS 代碼尚未能執行，所以能捕獲的狀態只有interactive 和 complete 這2個狀態

此時，擁有了3個可用節點，分別是

document.readyState 的 interactive

document.readyState 的 complete

window.onload

進度條 DOM 結構

<div class="progress">
  <div></div>
</div>

進度條的默認 CSS

.abc {
  width: 100%;
  height: 10px;
}

.abc div {
  width: 0;
  height: 100%;
  background: green;
}

記得給進度條加上動畫

  transition: width .5s;

js 代碼如下：

document.addEventListener('readystatechange', function () {
  if(document.readyState === 'interactive') {
    document.querySelector('.progress div').style.width = '33%'
  }

  if(document.readyState === 'complete') {
    document.querySelector('.progress div').style.width = '66%'
  }
} )
window.onload = function () {
  document.querySelector('.abc div').style.width = '100%'
}

分別在 3個節點讓進度條 width 漲 33% 66% 和 100%

此時就得到了一個相對準確的加載進度條

interactive

onload

在線咨詢

上一篇：用Python畫中國地圖，實現各省份數據可視化
下一篇：如何實現html代碼與php代碼互相轉換？

您的項目需求

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

整合營銷服務商

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

您的項目需求