php - 在大多数现代浏览器中显示进度条的简单方法有哪些？

Question

所以我有这个：

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

在运行良好的 Opera 中，在 IE 中它只显示“进度：50 of 100 done”而没有栏。

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

Answer 1

我确定有很多 javascript 解决方案。试试 jQuery UI 进度条，它在劣质浏览器中应该比 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 并且仍然使其与旧浏览器兼容，请查看此博客文章。