本文将介绍如何使用 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)</