在我们每周的WeAreDevelopers 直播节目中，我希望在展示的页面中添加一个时间进度条。问题是，这些是使用 GitHub Pages 的 Markdown 文件，虽然我确实在其中使用了一些脚本，但我希望确保能够用纯CSS实现此功能，这样就可以在 GitHub 上使用，而无需创建 HTML 模板。就是这样：
这些栏目支持暗色和亮色模式，应该相当实用。您可以查看演示页面，使用 Liquid 源代码查看实际效果，或者使用Codepen中的几行CSS代码进行体验。您可以 fork 代码库以将其用于您的页面，或者直接复制 `_includes` 文件夹。
使用CSS时间进度条
你可以在单个页面中使用任意数量的栏。在 Markdown 文件中添加栏的语法如下：
{% 包括 cssbar.html 持续时间=”2s” id=”guesttopic” styleblock=”yes” %}
- `duration` 变量定义进度需要多长时间
- “id”变量是必需的，并且必须是唯一的才能使功能发挥作用
- 如果设置了 `styleblock`，include 会添加一个包含必要CSS 规则的`style`，因此您无需将它们添加到主站点样式中。您只需在其中一个 include 中执行此操作即可。
在HTML文档中使用栏
当然，你也可以在纯HTML文档中使用该栏，如codepen中所示。语法如下：
开始
不要忘记在复选框和标签中设置唯一的 ID，并在内联样式中定义持续时间。
缺点
- 这有点 hack ，因为它无法被非视觉用户访问，并且滥用复选框来使其仅支持CSS 。不过它可以通过键盘访问。
- 在一个更好的世界中，我会使用HTML “进度”元素并对其进行样式化……