本文将介绍如何应用 HTML/CSS 创立各种根底进度条及花式进度条及其动画的形式，通过本文，你可能能够学会：
- 通过 HTML 标签
<meter>创立进度条 - 通过 HTML 标签
<progress>创立进度条 - HTML 实现进度条的局限性
- 应用 CSS 百分比、突变创立一般进度条及其动画
- 应用 CSS 创立圆环形进度条
- 应用 CSS 创立球形进度条
- 应用 CSS 创立 3D 进度条
进度条，是咱们日常界面中应用的十分多的一种，上面咱们来看看。到明天，咱们能够如何实现进度条。
HTML 标签 -- meter & progress
这个可能是一些同学还不太分明的，HTML5 原生提供了两个标签 <meter> 和 <progress> 来实现进度条。
<meter>：用来显示已知范畴的标量值或者分数值<progress>：用来显示一项工作的实现进度，通常状况下，该元素都显示为一个进度条
咱们别离来看看，首先是 <meter> 标签：
<p> <span>完成度：</span> <meter min="0" max="500" value="350">350 degrees</meter></p>meter { width: 200px;}款式如下：
其中，min、max、value 别离示意最大值，最小值与以后值。
独一无二，咱们再来看看 <progress> 标签的用法：
<p> <label for="file">完成度：</label> <progress max="100" value="70"> 70% </progress></p>progress { width: 200px;}款式如下：
其中，max 属性形容这个 progress 元素所示意的工作一共须要实现多少工作量，value 属性用来指定该进度条已实现的工作量。
meter & progress 之间的差别
那么问题来了，从上述 Demo 看，两个标签的成果截然不同，那么它们的区别是什么？为什么会有两个看似一样的标签呢？
这两个元素最大的差别在于语义上的差异。
<meter>：示意已知范畴内的标量测量值或分数值<progress>：示意工作的实现进度
譬如，一个需要以后的完成度，应该应用 <progress>，而如果要展现汽车仪表盘以后的速度值，应该应用 meter。
meter & progress 的局限性
当然，在理论的业务需要中，或者生产环境，你简直是不会看到 <meter> 和 <progress> 标签。
和咱们在这篇文章中 -- 《利用 datalist 实现可过滤下拉选框》 讲到的起因相似，在于：
- 咱们无奈无效的批改
<meter>和<progress>标签的款式，譬如背景色，进度前景色等。并且，最为致命的是，浏览器默认款式的体现在不同浏览器之间并不统一。这给谋求稳固，UI 体现统一的业务来说，是灾难性的毛病！ - 咱们无奈给他增加一些动画成果、交互成果，因为一些理论的利用场景中，必定不是简略的展现一个进度条仅此而已
利用 CSS 实现进度条
因而，在现阶段，更多的还是应用一些 CSS 的形式去实现进度条。
应用百分比实现进度条
最为常见的一种形式是应用背景色配合百分比的形式制作进度条。
最简略的一个 DEMO：
<div class="g-container"> <div class="g-progress"></div></div>.g-container { width: 240px; height: 25px; border-radius: 25px; background: #eee;}.g-progress { width: 50%; height: inherit; border-radius: 25px 0 0 25px; background: #0f0;}成果如下：
这种形式劣势在于应用简略，理论进度能够十分不便的传递进 CSS 中
- 利用 HTML
style属性填写残缺的width值，譬如<div class="g-progress" style="width: 50%"></div> - 或者利用 CSS 自定义属性
<div class="g-progress" style="--progress: 50%"></div>配合理论 CSS 中的width: var(--progress) - 齐全的自定义款式，以及能够轻松的增加辅助丰盛的动画和交互成果
譬如给 g-progress 增加一个过渡成果：
.g-progress { // ... transition: width .2s linear;}这样，每次进度变动，都是一个动静的过渡过程：
或者，突变前景色，批改 background: #0f0 为 background: linear-gradient(90deg, #0f0, #0ff)：
单标签应用突变实现
当然，能够看到，咱们下面应用的是两个标签的构造：
<div class="g-container"> <div class="g-progress"></div></div>抠门点，咱们还能够仅仅利用一个标签去实现这个事件，次要借助了突变去实现这个事件：
<div class="g-progress"></div>.g-progress { width: 240px; height: 25px; border-radius: 25px; background: linear-gradient(90deg, #0f0, #0ff 70%, transparent 0); border: 1px solid #eee;}后果如下：
同样的，咱们能够利用 HTML style 属性填写残缺的 background 值传递理论百分比，当然，这里更举荐应用 CSS 自定义属性传值：
<div class="g-progress" style="--progress: 50%"></div>.g-progress { background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0);}相熟 CSS 的同学会发现一个目前这种形式的弊病，在于当批改 --progress 的值的时候，即使给 .g-progress 增加了 transition，也不会有过渡动画成果。
起因在于，CSS 中，突变（诸如 linear-gradinet、radial-gradient、conic-gradient）都是不反对过渡变换的。
所以，在这里，为了实现动画成果，咱们能够借助 CSS @property，革新下咱们的代码：
<div class="g-progress" style="--progress: 70%"></div>@property --progress { syntax: '<percentage>'; inherits: false; initial-value: 0%;}.g-progress { margin: auto; width: 240px; height: 25px; border-radius: 25px; background: linear-gradient(90deg, #0f0, #0ff var(--progress), transparent 0); border: 1px solid #eee; transition: .3s --progress;}借助 CSS @property 的个性，咱们在单标签下也是能够实现动画成果的：
CodePen Demo -- 单标签的进度条成果
对 CSS @property 还不理解的，能够看看我的这篇文章 -- CSS @property，让不可能变可能
当然，这里不仅仅只是上述所说的百分比、和突变两种形式能够实现这种最常见的进度条，所有能够实现长度变动的，其实都能够用于实现进度条，包含但不限于：
- 宽度（应用百分比为单位的宽度更为间接）
- 突变（管制突变的过渡点的百分比的值）
- 突变的
background-size transfrom: scale()（缩放也能扭转宽度大小）clip-path进行裁剪- ...（等等等等）
这里不再持续开展。
圆弧形进度条
当然，进度条不可能只有直线型的。还有十分多其余类型的，上面咱们首先来看看圆弧型的进度条。
在明天，咱们能够应用 CSS 疾速的创立圆弧模式的进度条，相似于这样：
外围就是应用角向突变 background: conic-gradient()：
<div class="g-progress"></div>.g-progress { width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D);}利用角向突变 background: conic-gradient()，咱们能够轻松实现这样一个饼图：
接下来就是镂空两头局部。
传统的想法是，在两头叠加一个圆，然而，这样做的一个极大的弊病在于，如果咱们的背景不是纯色而是渐变色，就不实用了，譬如这样：
那么如何镂空两头，使得两头局部通明呢？这里咱们能够奇妙的通过 mask 属性达到目标，镂空两头：
.g-progress { background: conic-gradient(#FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D); + mask: radial-gradient(transparent, transparent 50%, #000 50%, #000 0);}这样，咱们就轻松的镂空了两头，即使背景不是纯色也不妨。
CodePen Demo - 角向突变实现圆弧形进度条
基于此拓展，还能够实现多色的圆弧型进度条：
.g-progress { width: 160px; height: 160px; border-radius: 50%; mask: radial-gradient(transparent, transparent 50%, #000 51%, #000 0); background: conic-gradient( #FFCDB2 0, #FFCDB2 25%, #B5838D 25%, #B5838D 50%, #673ab7 50%, #673ab7 90%, #ff5722 90.2%, #ff5722 100% );}当然，这个可能不像进度条，更相似于饼图？
角向突变实现圆弧进度条的局限性
当然，这个办法有两个弊病。
- 当然进度百分比不是相似于 0°、90°、180°、270°、360° 这类数字时，应用角向突变时，不同色彩间的连接处会有显著的锯齿。
看个例子 conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)：
遇到此类问题的解决方案是，在连接处，适当留出一些突变空间，咱们简略的革新一下上述角向突变代码：
{ - background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27%, #B5838D)` + background: conic-gradient(#FFCDB2 0, #FFCDB2 27%, #B5838D 27.2%, #B5838D)`}认真看下面的代码，将从 27% 到 27% 的一个变动，改为了 从 27% 到 27.2%，这多进去的 0.2% 就是为了打消锯齿的，理论扭转后的成果：
具体应用的应用，能够多调试选取既不会看出含糊，又能尽可能打消锯齿的一个范畴幅度。
- 对于结尾和结尾须要圆形的圆弧进度条实现起来较为麻烦
还有一种状况，理论应用中，要求的是首尾带圆形的圆弧进度条，例如下图所示：
当然，这种状况当然进度条色彩是纯色也是能够解决的，咱们通过在在首尾处叠加两个小圆圈即可实现这种成果。
如果进度条是渐变色的话，这种进度条则须要借助 SVG/Canvas 实现了。
上述残缺的带圆角的圆弧进度条，你能够戳这里看残缺源码 -- CodePen Demo -- 首尾为圆形的圆弧进度条
球形进度条
球形进度条也是比拟常见的，相似于上面这种：
对于球形进度条，其实外围在于应用 CSS 实现两头局部的波浪成果。
这个技巧到明天应该曾经被大伙熟知了，就不过多赘述，一图胜千言，能够应用滚动大圆的形式，相似于这样：
容器利用 overflow: hidden，就能失去这样的成果：
对这个技巧还不了解，能够猛击这篇文章：纯 CSS 实现波浪成果！
利用这个技巧，只须要简略的封装，管制一下球形容器示意进度 0% - 100% 时的波浪的高度即可。咱们就能失去从 0% - 100% 的动画成果。
残缺的代码大略如下：
<div class="container"> <div class="wave-change"></div> <div class="wave"></div></div>.container { width: 200px; height: 200px; border: 5px solid rgb(118, 218, 255); border-radius: 50%; overflow: hidden;}.wave-change { position: absolute; width: 200px; height: 200px; left: 0; top: 0; animation: change 12s infinite linear; &::before, &::after{ content: ""; position: absolute; width: 400px; height: 400px; top: 0; left: 50%; background-color: rgba(255, 255, 255, .6); border-radius: 45% 47% 43% 46%; transform: translate(-50%, -70%) rotate(0); animation: rotate 7s linear infinite; z-index: 1; } &::after { border-radius: 47% 42% 46% 44%; background-color: rgba(255, 255, 255, .8); transform: translate(-50%, -70%) rotate(0); animation: rotate 9s linear -4s infinite; z-index: 2; }}.wave { position: relative; width: 200px; height: 200px; background-color: rgb(118, 218, 255); border-radius: 50%;}p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 36px; color: #000; z-index: 10;}@keyframes rotate { to { transform: translate(-50%, -70%) rotate(360deg); }}@keyframes change { from { top: 80px; } to { top: -120px; }}残缺的代码示例，你能够戳这里：
- CodePen Demo -- Pure Css Wave Progress bar
- CodePen Demo -- Pure Css Wave Progress bar Animation
3D 进度条
嗯，上面这个 3D 进度条须要对 CSS 3D 有根本的把握。
你能够先看看这篇文章 -- 奇思妙想 CSS 3D 动画 | 仅应用 CSS 能制作出多惊艳的动画？
它次要是借助了一个 3D 立方体。接下来咱们来实现一个立方体进度条~
首先，实现一个立方体，构造如下：
<div class="demo-cube perspective"> <ul class="cube"> <li class="top"></li> <li class="bottom"></li> <li class="front"></li> <li class="back"></li> <li class="right"></li> <li class="left"></li> </ul></div>咱们能够把这个立方体设想成一个平面的进度条容器，通过管制 6 面的色彩，咱们能够奇妙的失去一种 3D 进度条成果。
当然，其实咱们不须要那么多面，4 个面即可，去掉左右，而后利用突变批改一下立方体各个面的色彩，去掉 border，外围的 CSS 代码如下：
.demo-cube { position: relative; .cube { position: absolute; top: 50%; left: 50%; width: 300px; height: 100px; transform-style: preserve-3d; transform: translate(-50%, -50%) rotateX(-33.5deg); li { position: absolute; width: 300px; height: 100px; background: linear-gradient(90deg, rgba(156, 39, 176, .3), rgba(255, 34, 109, .8) 70%, rgba(255, 255, 255, .6) 70%, rgba(255, 255, 255, .6)); } .top { transform: rotateX(90deg) translateZ(50px); } .bottom { transform: rotateX(-90deg) translateZ(50px); } .front { transform: translateZ(50px); } .back { transform: rotateX(-180deg) translateZ(50px); } }}咱们就能够失去一个十分酷炫的 3D 进度条成果：
利用 CSS Property 给 3D 进度条加上动画
当然，进度条嘛，它须要一个填充动画。因为咱们应用的是突变实现的进度条的进度，须要去管制其中的色彩百分比变动。
而失常而言，CSS 是不反对突变的动画的，不过这也难不倒咱们，因为咱们能够应用 CSS @Property 。
简略革新一下代码：
@property --per { syntax: '<percentage>'; inherits: false; initial-value: 0%;}.demo-cube .cube { .top, .front, .bottom, .back { background: linear-gradient(90deg, rgba(255, 217, 34, .6), rgba(255, 34, 109, .8) var(--per), rgba(255, 34, 109, .1) var(--per), rgba(255, 34, 109, .1)); animation: perChange 6s infinite; }}@keyframes perChange { 0% { --per: 0%; } 90%, to { --per: 80%; }}这样，咱们就实现了一个会动的 3D 进度条，只须要管制 --per CSS 自定义属性即可，成果如下：
对于 CSS @Property 不算很理解的，能够看看作者的这篇文章 -- CSS @property，让不可能变可能，它的呈现，让 CSS 极大的晋升了制作各种动画的能力。
上述的残缺代码，你能够猛击这里：CSS 灵感 -- 3D 立方体进度条
扩大延长
本文从简到繁介绍了应用 HTML/CSS 逐渐构建进度条的形式，并且逐步加深了难度。
当然，随着难度的晋升，失去的是更为酷炫的进度条。
基于上述的办法介绍，根本能够演化出各种咱们须要的进度条。譬如基于上述的办法，能够实现一个简略的电池充电动画：
当然，CSS 变幻无穷，进度条的品种必定也不仅仅局限于上述的几类。譬如咱们能够利用滤镜实现的仿华为手机的充电动画，也是一种进度条的出现形式，也是可能应用纯 CSS 实现的：
上述成果的残缺实现能够戳 -- 巧用 CSS 实现酷炫的充电动画
又或者，咱们能够在进度条的纹理上做文章：
成果来源于 CodePen -- Bars By Lucagaz。
总而言之，CSS 美好世界值得咱们去摸索。
最初
好了，本文到此结束，心愿本文对你有所帮忙 :)
想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 -- iCSS前端趣闻
更多精彩 CSS 技术文章汇总在我的 Github -- iCSS ，继续更新，欢送点个 star 订阅珍藏。
如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。