当前位置: 开发笔记 > 前端 > 正文

使用CSS实现的几种进度条

作者：临临临峰_547 | 来源：互联网 | 2022-10-15 13:45

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

源码如下：

这种方法的核心就是以当前盒子为容器，以 ::before 为内容填充。用

的好处就是实现简单，兼容性强，拓展性高，但是美中不足的是标签语义化不强。

进阶版 — input type="range"

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

源码如下：

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

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

实现如下：

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

终极版 — meter 赛高

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

代码如下：

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

总结

本文测评了4种实现进度条的方式，得出的结论就是 ——

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

嗯，万能的

。

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

更多编程相关知识，请访问：编程视频！！

以上就是使用CSS实现的几种进度条的详细内容，更多请关注其它相关文章！

推荐阅读

chrome
每日前端实战：148# 视频教程展示纯 CSS 实现按钮两侧滑入装饰元素的悬停效果

通过点击页面右侧的“预览”按钮，您可以直接在当前页面查看效果，或点击链接进入全屏预览模式。该视频教程展示了如何使用纯 CSS 实现按钮两侧滑入装饰元素的悬停效果。视频内容具有互动性，观众可以实时调整代码并观察变化。访问以下链接体验完整效果：https://codepen.io/comehope/pen/yRyOZr。 ... [详细]

蜡笔小新 2024-11-07 14:24:29
webkit
深入理解CSS盒模型与box-sizing属性

本文详细介绍了W3C标准盒模型和IE传统盒模型的区别，探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析，帮助读者更好地理解和应用这一关键概念。 ... [详细]

蜡笔小新 2024-12-27 15:01:09
js
ASP.NET Core 3.1 中的Startup类

Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类，按照约定命名为 Startup。 Startup 类：可选择性地包括 ... [详细]

蜡笔小新 2024-12-25 02:13:25
chrome
自己用过的一些比较有用的css3新属性【HTML】

web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久，虽然大多数的css3属性在很多流行的浏览器中不支持，但我个人觉得还是要尽量开 ... [详细]

蜡笔小新 2024-12-24 19:26:54
webkit
自定义CSS样式打造个性化HTML5视频播放器

本文详细介绍如何使用CSS自定义HTML5视频播放器的样式，涵盖常见属性及跨浏览器兼容性问题。发布时间：2020-09-14 14:46:29；来源：亿速云；阅读量：58；作者：小新。 ... [详细]

蜡笔小新 2024-12-22 18:36:22
js
微信小程序长文本折叠解决方案探讨

在进行微信小程序开发过程中，遇到了需要实现类似微信朋友圈那样的长文本折叠功能的需求。本文将详细探讨其实现方法及注意事项。 ... [详细]

蜡笔小新 2024-12-11 10:42:21
webkit
使用纯CSS创建生动的太阳天气图标

本文介绍如何利用纯CSS技术，通过简单的DOM结构和CSS样式设计，创建一个具有动态光影效果的太阳天气图标。 ... [详细]

蜡笔小新 2024-12-09 18:58:50
js
使用 NDB 提升 Node.js 应用调试体验

本文介绍了由 Google Chrome 实验室推出的新一代 Node.js 调试工具 NDB，旨在为开发者提供更加高效和便捷的调试解决方案。 ... [详细]

蜡笔小新 2024-12-02 20:52:15
js
CSS3中如何使用background-size定义背景图片大小

CSS3中如何使用background-size定义背景图片大小？针对这个问题，今天小编总结这篇有关background-size属性的文章，可供感兴趣的小伙伴们参考借鉴 ... [详细]

蜡笔小新 2023-10-14 17:07:25
js
一篇文章搞定css3 3d效果

css33d学习心得卡片反转魔方banner图首先我们要学习好css33d一定要有一定的立体感通过这个图片应该清楚的了解到了x轴y轴z轴是什么概念了。首先先给大家看一个小 ... [详细]

蜡笔小新 2023-10-11 12:41:15
js
如何使用JavaScript动态设置CSS3属性值

这篇文章将为大家详细讲解有关如何使用JavaScript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读 ... [详细]

蜡笔小新 2023-10-11 05:24:06
js
试图实现向上箭头 - trying to achieve arrow pointing upwards

Iamtryingtoachievethearrowpointingupwards..iamtryingtoachieveitinmycssiamnotabl ... [详细]

蜡笔小新 2023-10-09 19:41:30
chrome
CSS3实现背景颜色渐变

background:-webkit-gradient(linear,10%10%，100%100%， ... [详细]

蜡笔小新 2023-09-25 18:49:33
svg
前端实用的CSS3技巧有哪些

本文小编为大家详细介绍“前端实用的CSS3技巧有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“前端实用的CSS3技巧有哪些”文章能帮助大家 ... [详细]

蜡笔小新 2023-09-25 13:50:50
webkit
怎么用css3实现图片的高斯模糊效果

小编给大家分享一下怎么用css3实现图片的高斯模糊效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后 ... [详细]

蜡笔小新 2023-09-24 14:56:09

临临临峰_547

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章