在大多数现代浏览器中，哪种简单的方法可以显示进度条？

Question

所以我有这个：

<progress max="100" value="50">   <strong>Progress: 50 of 100 done.</strong>         
</progress>  

在Opera中工作正常，在IE中它只显示“Progress：50 of 100 done”而没有条形。

在大多数现代浏览器中，有哪种简单的方法可以显示进度条？它只在页面加载后才更新，因此不需要ajax等。

Answer 1

我确定有很多javascript解决方案。尝试使用jQuery UI Progress栏，它在劣质浏览器中应该比HTML5标签更可靠。

http://docs.jquery.com/UI/Progressbar

Answer 2

在不使用<progress>标记的情况下显示进度条的最简单方法是：

<div style="position: relative;">
    <div style="position: relative; z-index: 2; text-align: center;">Progress: 50/100</div>
    <div style="position: absolute; left: 0px; top: 0px; bottom: 0px; width: 50%; background-color: blue;"></div>
</div>

如果您愿意，也可以通过更改文本和width样式轻松制作动画。

Answer 3

如果你不想为此使用jQuery，仍然使它与旧版浏览器take a look at this blog post兼容。