【E800编译】用于多填充的样式表不在本文讨论呢之列，而且下面的示例不适合IE7-8和Safari 5.1+。

作为一名Web应用开发员，当你希望向用户展示一些操作的进展时，进度条是非常好的选择，特别是进展需要花费较长时间时。进度条可以是动态的（比如Gmail向用户展示加载与初始化的进程）也可是是静态的（比如一些购物车应用可以向用户展示用户需要查看的页数。）笔者曾用<div>标签，CSS等创建进度条，但现在系统使用HTML5的<progress>标签实现这一操作。本文将讨论如何在所有操作系统和浏览器中默认设置这一标签，以及如何用CSS对progress标签进行样式设置。还会讨论对一些浏览器中的局限性进行讨论，并用高级CSS3技巧展示一些有意思的示例。

HTML：简单的进度条实例

进度条的HTML非常简单：

<progressmax="100" value="60">

<strong>Progress: 60%done.</strong>

</progress>

注意，<progress>标签中的HTML是为不支持该标签的浏览器提供的备用。遗憾的是，所有IE版本和Safari，以及5.x以下的Firefox和10.x以下的Opera都不支持。尽管这个权宜之计可行，但我们仍然要往前走一步，使用LeaVerou的<progress>标签多填充，因为这个工具对几乎所有浏览器都提供支持（除Safari 5以及更低的版本外。）让我们看看下面的截屏，，了解一下<progress>

注意：

1.Firefox和Chrome可以按照主机操作系统的方式安排进度条，除了Chrome的Linux版本外，因为Chrome Linux版本使用自己的自定义风格。

2.Opera进度值的颜色通常是绿色的。

3.使用多填充的浏览器都是用漂亮的浅蓝色渐变效果设置进度条。

在没有值属性的时候，进度条还会出现“不确定”状态。

<progressmax="100">

<strong>Progress: 60%done.</strong>

</progress>

这个效果被用来展示当前未知的进度（例如，Web服务器需要多久时间才能实现文件下载的初始化）。看看这一状态在不同浏览器中的样子。

注意：

1.Opera是唯一不能对带有“不确定”状态进度条和零值进度条进行区分的浏览器。

2.其他浏览器可以动态显示“不确定”状态。