你不知道的 CSS 进度条

小鱼儿 2022-12-30 13:52 176阅读 0赞

>  *  作者：陈大鱼头
>  *  github：KRISACHAN

进度条是一个非常常见的功能，实现起来也不难，一般我们都会用 `div` 来实现。

作为一个这么常见的需求， whatwg 肯定是不会没有原生组件提供（虽然有我们也不一定会用），那么就让我们来康康有哪些有意思的进度条实现方式。

## 常规版 — div 一波流 ##

这是比较常规的实现方式，先看效果：

![format_png][]

源码如下：

这种方法的核心就是以当前盒子为容器，以 `::before` 为内容填充。用 `<div>` 的好处就是实现简单，兼容性强，拓展性高，但是美中不足的是标签语义化不强。

## 进阶版 — input type="range" ##

`<input />` 是一个非常实用的替换元素，不同的 **type** 可以做不同的事情。第二种就是用 `<input type="range" />` 来实现的。首先我们来看看效果：

![format_png 1][]

源码如下：

写完这个 demo 才发现，`<input type="range" />` 并不适合做这个功能。。一个是实现困难，这个 **type** 组件的每个元件都可以单独修改样式，但是效果并不是很好。

另一个是因为 **range** 有专属语意 —— 范围，所以它更适合做下面这种事：

![format_png 2][]

以上demo来自：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

## 高级版 — progress 鸭 ##

当然，上述两种方式都是模拟进度条，实际上我们并不需要模拟，因为 **whatwg** 有为我们提供原生的进度条标签 —— `<progress>` 。

我们先看效果：

![format_png 3][]

实现如下：

虽然有原生的进度条标签，但是规范里并没有规定它的具体表现，所以各个浏览器厂商完全可以按照自己的喜好去定制，样式完全不可控，所以标签虽好。。可用性却不强，有点可惜。

## 终极版 — meter 赛高 ##

当然，能够实现进度条功能的标签，除了上面所说的，还有 `<meter>` 标签。先看效果：

![format_png 4][]

代码如下：

这个标签可能比较陌生，实际上它跟 `<input type="range">` 的语义是一样的，用来显示已知范围的标量值或者分数值。不一样的就是。。。它样式改起来更麻烦。

## 总结 ##

本文测评了4种实现进度条的方式，得出的结论就是 —— `<div>` 赛高。。。虽然有的时候想优雅一点追求标签语义化，但是资源不支持，也很尴尬。

嗯，万能的 `<div>` 。

以上 demo 都可以我的 codepen 上查看：https://codepen.io/krischan77/pen/QPezjB

点 “查看原文” 也可以看哦～

[format_png]: /images/20221120/e0ad3deb01214b74ab71b5d24af765ac.png
[format_png 1]: /images/20221120/508d3bb8334a453f9c9c751b23ccdea4.png
[format_png 2]: /images/20221120/486d96829570464593a7d0ef68207802.png
[format_png 3]: /images/20221120/a4d553fb693a462eb1e0c6f6d1e7edd0.png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi95MHJzSU5QcmxaeWRqdG1jWkhoSWRxaWFVeURySkJDZ2dBZzRvM2ljRWg2Q2FTT1dlY25KbUlJZnN4R3YwTmVGQjNMVFB5bW9EMkZXYTU4Nk5xQ1dKaWI4QS82NDA?x-oss-process=image/format,png