替代HTML5进度条

Question

背景

从我所看到的，对HTML5进度条的支持仍然是零星的，并且在每个浏览器或操作系统中使它看起来相同的方法通常很复杂。

http://www.hongkiat.com/blog/html5-progress-bar/展示了如何在css中创建多个psuedo-classes，试图在每个浏览器中影响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修改内部跨度的width属性来更改其值。

<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为例说明了这种方法有多强大。