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
聲明：文章著作權歸作者所有，如有侵權，請聯系小編刪除。

可思議的純 CSS 滾動進度條效果

問題先行，如何使用 CSS 實現下述滾動條效果？

就是頂部藍色的滾動進度條，隨著頁面的滾動進度而變化長短。

在繼續閱讀下文之前，你可以先緩一緩。嘗試思考一下上面的效果或者動手嘗試一下，不借助 JS ，能否巧妙地實現上述效果。

OK，繼續。這個效果是我在業務開發的過程中遇到的一個類似的小問題。其實即便讓我借助 Javascript ，我的第一反應也是，感覺很麻煩啊。所以我一直在想，有沒有可能只使用 CSS 完成這個效果呢？

分析需求

第一眼看到這個效果，感覺這個跟隨滾動動畫，僅靠 CSS 是不可能完成的，因為這里涉及了頁面滾動距離的計算。

如果想只用 CSS 實現，只能另辟蹊徑，使用一些討巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成這個效果。分析一下難點：

如何得知用戶當前滾動頁面的距離并且通知頂部進度條？

正常分析應該是這樣的，但是這就陷入了傳統的思維。進度條就只是進度條，接收頁面滾動距離，改變寬度。如果頁面滾動和進度條是一個整體呢？

實現需求

不賣關子了，下面我們運用線性漸變來實現這個功能。

假設我們的頁面被包裹在 <body> 中，可以滾動的是整個 body，給它添加這樣一個從左下到到右上角的線性漸變：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-repeat: no-repeat;
}
復制代碼

那么，我們可以得到一個這樣的效果：

Wow，黃色塊的顏色變化其實已經很能表達整體的進度了。其實到這里，聰明的同學應該已經知道下面該怎么做了。

我們運用一個偽元素，把多出來的部分遮住：

body::after {
    content: "";
    position: fixed;
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: -1;
}
復制代碼

為了方便演示，我把上面白色底改成了黑色透明底，：

實際效果達成了這樣：

眼尖的同學可能會發現，這樣之后，滑到底的時候，進度條并沒有到底：

究其原因，是因為 body 的線性漸變高度設置了整個 body 的大小，我們調整一下漸變的高度：

body {
    background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
    background-size: 100% calc(100% - 100vh + 5px);
    background-repeat: no-repeat;
}
復制代碼

這里使用了 calc 進行了運算，減去了 100vh，也就是減去一個屏幕的高度，這樣漸變剛好在滑動到底部的時候與右上角貼合。

而 + 5px 則是滾動進度條的高度，預留出 5px 的高度。再看看效果，完美：

至此，這個需求就完美實現啦，算是一個不錯的小技巧，完整的 Demo：

CodePen Demo -- 使用線性漸變實現滾動進度條

別人寫過的東西通常我都不會再寫，這個技巧很早

以前就有看到，中午在業務中剛好用到這個技巧就寫下了本文，沒有去考證最先發明這個技巧的是誰。

在線咨詢

上一篇：好程序員Java教程分享使用HttpClient抓取頁面內容
下一篇：傳統ISV進場，MolyApp的HTML5生意是讓商戶、明星商城快速構建線上營銷和支付渠道

您的項目需求

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

整合營銷服務商

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

可思議的純 CSS 滾動進度條效果

分析需求

實現需求

您的項目需求