如何使用 HTML 和 CSS 创建进度条（视频）

关于如何使用 Web 技术创建进度条的教程已经有很多了，为什么我们需要一个新的呢？我发现很多教程都臃肿不堪：它们包含大量不必要的 HTML 元素，或者所有内容都基于 JavaScript。此外，它们往往忽略了 Web 可访问性，最终的组件对于辅助技术 (AT) 用户来说可能是一个挑战。

但并非必须如此。我们可以使用单个 HTML 元素和一些 CSS 创建一个动态进度条组件，它可以是可自定义的、响应式的、可访问的。我在这个视频中解释了这个过程：

如果你更喜欢阅读而不是观看视频教程，我很快会发布一篇关于这个主题的文章（内容会是视频的文字记录）。或者，如果你想直接跳到代码进行探索，你可以在CodePen 的 demo中查看源代码：