HTML5 进度条的替代方案

Question

背景

据我所知，对 HTML5 进度条的支持仍然是零星的，使它在每个浏览器或操作系统中显示相同的方法通常很复杂。

http://www.hongkiat.com/blog/html5-progress-bar/ 展示了如何在 css 中创建多个伪类，试图在每个浏览器中影响 progress 元素的样式。

progress {
    /* style rules */
}
progress::-webkit-progress-bar {
    /* style rules */
}
progress::-webkit-progress-value {
    /* style rules */
}
progress::-moz-progress-bar {
    /* style rules */
}

这似乎是一个非常臃肿的方法，因为样式将完全依赖于实验兼容性规则。

有关 HTML5 进度元素样式的更多信息：https://css-tricks.com/html5-progress-element/

问题

是否有使用 HTML、CSS 和 Javascript 制作通用进度条的更简单的一步解决方案？

Answer 1

是的。最简单的方法是将一个跨度放置在另一个跨度内。然后，几乎所有浏览器和操作系统都可以使用所有样式，您可以简单地修改内部跨度的宽度属性和 Javascript 以更改其值。

<span id="progressContainer">
  <span id="progress" style="width:50%;"></span>
</span>

<style>
#progressContainer {
  display: inline-block;
  width: 400px;
  height: 4px;
}

#progress {
  display: block;
  height: 100%;
  background-color: green;
}
</style>

我以 this codepen 为例来说明此方法的强大之处。

HTML5 进度条的替代方案

Alternative to the HTML5 progress bar

html

javascript

css

progress-bar

背景

问题