站长资讯网本篇文章给大家整理了仅仅使用HTML/CSS实现各类进度条的方式，希望对大家有帮助。
本文将介绍如何使用 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> 标签。
-
我们无法有效的修改 <meter> 和 <progress> 标签的样式，譬如背景色，进度前景色等。并且，最为致命的是，浏览器默认样式的表现在不同浏览器之间并不一致。这给追求稳定，UI 表现一致的业务来说，是灾难性的缺点！
-
我们无法给他添加一些动画效果、交互效果，因为一些实际的应用场景中，肯定不是简单的展示一个进度条仅此而已
利用 CSS 实现进度条
因此，在现阶段，
