你所不知道的CSS进度条

时间：2023-03-30 17:36:12 CSS

作者：陈大羽头github：KRISACHAN进度条是一个很常用的功能，实现起来也不难。一般我们使用div来实现。这么普遍的需求，whatwg如果没有原生组件肯定是不会提供的（虽然我们不一定会用到），那么让我们看看kangkang有哪些有趣的进度条实现方式。常规版——div流这是比较常规的实现方式，先看效果：源码如下：

点我~该方法的核心是将当前框作为容器，使用

和::before进行内容填充的好处是实现简单，兼容性强,可扩展性高，但美中不足的是标签语义不强。进阶版——inputtype="range"是一个非常实用的替换元素，不同的类型可以做不同的事情。第二种是使用来实现。首先我们来看效果：源码如下：点我一下嘛～写完这个demo，发现不适合这个功能，一是实现起来比较困难，这个类型组件的每个元素都可以单独修改，但是效果不怎么样很好。另一个是因为range有自己的语义——range，所以更适合做下面的事情：上面的demo来自：https://developer.mozilla.org...进阶版-progressduck当然，以上两种方式都是模拟进度条，其实我们不需要模拟，因为whatwg为我们提供了一个原生的进度条标签——。我们先看效果：现实如下：点我一下嗯～虽然有原生的进度条标签，但是其具体表现在规范中并没有具体说明，所以各个浏览器厂商完全可以根据自己的喜好定制，样式完全无法控制，所以标签很好。实用性不强，有点遗憾。终极版——meter赛高当然，可以实现进度条功能的标签，除了上面的，还有标签。先看效果：代码如下：<按钮id="btn"class="btn">点我一下嘛～这个标签可能比较陌生。事实上，它与具有相同的语义，只是用于显示已知范围的标量值或分数值不同。..换样式比较麻烦。综上所述，本文评测了4种进度条的实现方式，得出的结论是——

赛高。..虽然有时候想优雅一点，追求标签语义化，但是资源不支持，也很尴尬。好吧，全能的

。以上demo可以在我的codepen上查看：https://codepen.io/krischan77...

上一篇：你应该知道的5个JavaScriptArray.map()用法

下一篇：前端学习总结【101天】：CSS-伪类和伪元素的区分

你所不知道的CSS进度条相关文章