本文将介紹如何使用 HTML/CSS 建立各種基礎進度條及花式進度條及其動畫的方式，通過本文，你可能可以學會：
通過 HTML 标簽 <code><meter></code> 建立進度條
通過 HTML 标簽 <code><progress></code> 建立進度條
HTML 實作進度條的局限性
使用 CSS 百分比、漸變建立普通進度條及其動畫
使用 CSS 建立圓環形進度條
使用 CSS 建立球形進度條
使用 CSS 建立 3D 進度條
進度條，是我們日常界面中使用的非常多的一種，下面我們來看看。到今天，我們可以如何實作進度條。
這個可能是一些同學還不太清楚的，HTML5 原生提供了兩個标簽 <code><meter></code> 和 <code><progress></code> 來實作進度條。
<code><meter></code>：用來顯示已知範圍的标量值或者分數值
<code><progress></code>：用來顯示一項任務的完成進度，通常情況下，該元素都顯示為一個進度條
我們分别來看看，首先是 <code><meter></code> 标簽：
樣式如下：
其中，<code>min</code>、<code>max</code>、<code>value</code> 分别表示最大值，最小值與目前值。
無獨有偶，我們再來看看 <code><progress></code> 标簽的用法：
其中，<code>max</code> 屬性描述這個 progress 元素所表示的任務一共需要完成多少工作量，<code>value</code> 屬性用來指定該進度條已完成的工作量。
那麼問題來了，從上述 Demo 看，兩個标簽的效果一模一樣，那麼它們的差別是什麼？為什麼會有兩個看似一樣的标簽呢？
這兩個元素最大的差異在于語義上的差别。
<code><meter></code>：表示已知範圍内的标量測量值或分數值
<code><progress></code>：表示任務的完成進度
譬如，一個需求目前的完成度，應該使用 <code><progress></code>，而如果要展示汽車儀表盤目前的速度值，應該使用 <code>meter</code>。
當然，在實際的業務需求中，或者生産環境，你幾乎是不會看到 <code><meter></code> 和 <code><progress></code> 标簽。
和我們在這篇文章中 -- 《利用 datalist 實作可過濾下拉選框》 講到的原因類似，在于：
我們無法有效的修改 <code><meter></code> 和 <code><progress></code> 标簽的樣式，譬如背景色，進度前景色等。并且，最為緻命的是，浏覽器預設樣式的表現在不同浏覽器之間并不一緻。這給追求穩定，UI 表現一緻的業務來說，是災難性的缺點！
我們無法給他添加一些動畫效果、互動效果，因為一些實際的應用場景中，肯定不是簡單的展示一個進度條僅此而已
是以，在現階段，更多的還是使用一些 CSS 的方式去實作進度條。
最為常見的一種方式是使用背景色配合百分比的方式制作進度條。
最簡單的一個 DEMO：
效果如下：
這種方式優勢在于使用簡單，實際進度可以非常友善的傳遞進 CSS 中
利用 HTML <code>style</code> 屬性填寫完整的 <code>width</code> 值，譬如 <code><div class="g-progress" style="width: 50%"></div></code>
或者利用 CSS 自定義屬性 <code><div class="g-progress" style="--progress: 50%"></div></code> 配合實際 CSS 中的 <code>width: var(--progress)</code>
完全的自定義樣式，以及可以輕松的添加輔助豐富的動畫和互動效果
譬如給 <code>g-progress</code> 添加一個過渡效果：
這樣，每次進度變化，都是一個動态的過渡過程：
或者，漸變前景色，修改 <code>background: #0f0</code> 為 <code>background: linear-gradient(90deg, #0f0, #0ff)</code>：
當然，可以看到，我們上面使用的是兩個标簽的結構：
摳門點，我們還可以僅僅利用一個标簽去完成這個事情，主要借助了漸變去完成這個事情：
結果如下：
同樣的，我們可以利用 HTML <code>style</code> 屬性填寫完整的 <code>background</code> 值傳遞實際百分比，當然，這裡更推薦使用 CSS 自定義屬性傳值：
熟悉 CSS 的同學會發現一個目前這種方式的弊端，在于當修改 <code>--progress</code> 的值的時候，即便給 <code>.g-progress</code> 添加了 <code>transition</code>，也不會有過渡動畫效果。
原因在于，CSS 中，漸變（諸如 <code>linear-gradinet</code>、<code>radial-gradient</code>、<code>conic-gradient</code>）都是不支援過渡變換的。
是以，在這裡，為了實作動畫效果，我們可以借助 CSS @property，改造下我們的代碼：
借助 CSS @property 的特性，我們在單标簽下也是可以實作動畫效果的：
CodePen Demo -- 單标簽的進度條效果
對 CSS @property 還不了解的，可以看看我的這篇文章 -- CSS @property，讓不可能變可能
當然，這裡不僅僅隻是上述所說的百分比、和漸變兩種方式可以實作這種最常見的進度條，所有可以實作長度變化的，其實都可以用于實作進度條，包括但不限于：
寬度（使用百分比為機關的寬度更為直接）
漸變（控制漸變的過渡點的百分比的值）
漸變的 <code>background-size</code>
<code>transfrom: scale()</code>（縮放也能改變寬度大小）
<code>clip-path</code> 進行裁剪
...（等等等等）
這裡不再繼續展開。
當然，進度條不可能隻有直線型的。還有非常多其他類型的，下面我們首先來看看圓弧型的進度條。
在今天，我們可以使用 CSS 快速的建立圓弧形式的進度條，類似于這樣：
核心就是使用角向漸變 <code>background: conic-gradient()</code>：
利用角向漸變 <code>background: conic-gradient()</code>，我們可以輕松實作這樣一個餅圖：
接下來就是镂空中間部分。
傳統的想法是，在中間疊加一個圓，然而，這樣做的一個極大的弊端在于，如果我們的背景不是純色而是漸變色，就不适用了，譬如這樣：
那麼如何镂空中間，使得中間部分透明呢？這裡我們可以巧妙的通過 <code>mask</code> 屬性達到目的，镂空中間：
這樣，我們就輕松的镂空了中間，即便背景不是純色也無妨。
CodePen Demo - 角向漸變實作圓弧形進度條
基于此拓展，還可以實作多色的圓弧型進度條：
當然，這個可能不像進度條，更類似于餅圖？
當然，這個方法有兩個弊端。
當然進度百分比不是類似于 0°、90°、180°、270°、360° 這類數字時，使用角向漸變時，不同顔色間的銜接處會有明顯的鋸齒。
看個例子 <code>conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)</code>：
遇到此類問題的解決方案是，在銜接處，适當留出一些漸變空間，我們簡單的改造一下上述角向漸變代碼：
仔細看上面的代碼，将從 <code>27%</code> 到 <code>27%</code> 的一個變化，改為了 從 <code>27%</code> 到 <code>27.2%</code>，這多出來的 <code>0.2%</code> 就是為了消除鋸齒的，實際改變後的效果：
具體使用的使用，可以多調試選取既不會看出模糊，又能盡可能消除鋸齒的一個範圍幅度。
對于開頭和結尾需要圓形的圓弧進度條實作起來較為麻煩
還有一種情況，實際使用中，要求的是首尾帶圓形的圓弧進度條，例如下圖所示：
當然，這種情況當然進度條顔色是純色也是可以解決的，我們通過在在首尾處疊加兩個小圓圈即可實作這種效果。
如果進度條是漸變色的話，這種進度條則需要借助 SVG/Canvas 實作了。
上述完整的帶圓角的圓弧進度條，你可以戳這裡看完整源碼 -- CodePen Demo -- 首尾為圓形的圓弧進度條
球形進度條也是比較常見的，類似于下面這種：
對于球形進度條，其實核心在于使用 CSS 實作中間部分的波浪效果。
這個技巧到今天應該已經被大夥熟知了，就不過多贅述，一圖勝千言，可以使用滾動大圓的方式，類似于這樣：
容器應用 <code>overflow: hidden</code>，就能得到這樣的效果：
對這個技巧還不了解，可以猛擊這篇文章：純 CSS 實作波浪效果！
應用這個技巧，隻需要簡單的封裝，控制一下球形容器表示進度 0% - 100% 時的波浪的高度即可。我們就能得到從 0% - 100% 的動畫效果。
完整的代碼大概如下：
完整的代碼示例，你可以戳這裡：
CodePen Demo -- Pure Css Wave Progress bar
CodePen Demo -- Pure Css Wave Progress bar Animation
嗯，下面這個 3D 進度條需要對 CSS 3D 有基本的掌握。
你可以先看看這篇文章 -- 奇思妙想 CSS 3D 動畫 | 僅使用 CSS 能制作出多驚豔的動畫？
它主要是借助了一個 3D 立方體。接下來我們來實作一個立方體進度條~
首先，實作一個立方體，結構如下：
我們可以把這個立方體想象成一個立體的進度條容器，通過控制 6 面的顔色，我們可以巧妙的得到一種 3D 進度條效果。
當然，其實我們不需要那麼多面，4 個面即可，去掉左右，然後利用漸變修改一下立方體各個面的顔色，去掉 border，核心的 CSS 代碼如下：
我們就可以得到一個非常酷炫的 3D 進度條效果：
當然，進度條嘛，它需要一個填充動畫。由于我們使用的是漸變實作的進度條的進度，需要去控制其中的顔色百分比變化。
而正常而言，CSS 是不支援漸變的動畫的，不過這也難不倒我們，因為我們可以使用 CSS @Property 。
簡單改造一下代碼：
這樣，我們就實作了一個會動的 3D 進度條，隻需要控制 <code>--per</code> CSS 自定義屬性即可，效果如下：
對于 CSS @Property 不算很了解的，可以看看作者的這篇文章 -- CSS @property，讓不可能變可能，它的出現，讓 CSS 極大的提升了制作各種動畫的能力。
上述的完整代碼，你可以猛擊這裡：CSS 靈感 -- 3D 立方體進度條
本文從簡到繁介紹了使用 HTML/CSS 逐漸建構進度條的方式，并且逐漸加深了難度。
當然，随着難度的提升，得到的是更為酷炫的進度條。
基于上述的方法介紹，基本可以演化出各種我們需要的進度條。譬如基于上述的方法，可以實作一個簡單的電池充電動畫：
當然，CSS 千變萬化，進度條的種類肯定也不僅僅局限于上述的幾類。譬如我們可以利用濾鏡實作的仿華為手機的充電動畫，也是一種進度條的呈現方式，也是能夠使用純 CSS 實作的：
上述效果的完整實作可以戳 -- 巧用 CSS 實作酷炫的充電動畫
又或者，我們可以在進度條的紋理上做文章：
效果來源于 CodePen -- Bars By Lucagaz。
總而言之，CSS 美好世界值得我們去探索。
好了，本文到此結束，希望本文對你有所幫助 😃
更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。
如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。