替代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修改内部跨度的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>

我以该代码笔为例说明了该方法的强大功能。