这些都只是最基本的进度条效果，下面介绍一些非常有意思的效果：

两个图片的效果

这个进度条使用了同一张图片的两个版本对进度条的背景和值进行区分：

点击查看动态效果（http://www.useragentman.com/examples/progress/uam.html）

渐变

注意：不仅可以使用背景色和图片，还可以使用各种渐变效果。请参考（http://css-tricks.com/css3-progress-bars/）

遗憾的是，由于CSS渐变是浏览器供应商用专门的前缀部署的，所以其CSS有点长。

/*

 * Gradient Shadow

 */

/* All HTML5 progress enabled browsers */

progress.example3 {

 /* Turns off styling - not usually needed, but good to know. */

 appearance: none;

 -moz-appearance: none;

 -webkit-appearance: none;

 /* gets rid of default border in Firefox and Opera. */

 border: solid #cccccc 5px;

 border-radius: 10px;

 /* Dimensions */

 width: 238px;

 height: 45px;

}

/* Polyfill */

progress.example3[role]:after {

 background-image: none; /* removes default background from polyfill */

}

/*

 * Background of the progress bar background

 */

/* Firefox and Polyfill */

progress.example3 {

 background: #cccccc !important; /* !important only needed in polyfill */

}

/* Chrome */

progress.example3::-webkit-progress-bar {

 background: #cccccc;

}

/*

 * Background of the progress bar value

 */

/* Firefox */

progress.example3::-moz-progress-bar {

 border-radius: 5px;

 background-image: -moz-linear-gradient(

 center bottom,

 rgb(43,194,83) 37%,

 rgb(84,240,84) 69%

 );

}

/* Chrome */

progress.example3::-webkit-progress-value {

 border-radius: 5px;

 background-image: -webkit-gradient(

 linear,

 left bottom,

 left top,

 color-stop(0, rgb(43,194,83)),

 color-stop(1, rgb(84,240,84))

 );

 background-image: -webkit-linear-gradient(

 center bottom,

 rgb(43,194,83) 37%,

 rgb(84,240,84) 69%

 );

}

/* Polyfill */

progress.example3[aria-valuenow]:before {

 border-radius: 5px;

 background-image: -moz-linear-gradient(

 center bottom,

 rgb(43,194,83) 37%,

 rgb(84,240,84) 69%

 );

 background-image: -ms-linear-gradient(

 center bottom,

 rgb(43,194,83) 37%,

 rgb(84,240,84) 69%

 );

 background-image: -o-linear-gradient(

 center bottom,

 rgb(43,194,83) 37%,

 rgb(84,240,84) 69%

 );

}

注意这里没有使用渐变过滤器对IE6-9的CSS3渐变进行多填充。因为视觉过滤器在CSS3伪要素中不起作用。（http://www.useragentman.com/examples/progress/striping.html）

猴子动态效果

（http://www.animatedgif.net/clockscounters/clockscounters3.shtml）

注意这里的HTML有一个额外的<div>.标签，这样一来猴子就是动态的：

<progressclass="monkey" min="0" max="100"value="60"></progress>

<divclass="after"></div>

真希望可以使用:after或:before规则，但是这些伪要素不能支持任何不适用多填充的浏览器中的progress标签。

进度条的值改变时使动物动起来的CSS如下：

progress.monkey[value="0"]+ .after{

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif');

}

progress.monkey[value^="1"]+ .after {

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0 -77px ;

}

progress.monkey[value^="2"]+ .after {

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0 -154px ;

}

progress.monkey[value^="3"]+ .after,

progress.monkey[value="100"]+ .after{

background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif')0 -231px !important ;

}

progress.monkey[value^="4"]+ .after {

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0 -308px ;

}

progress.monkey[value^="5"]+ .after {

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0 -385px ;

}

progress.monkey[value^="6"]+ .after {

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0 -462px ;

}

progress.monkey[value^="7"]+ .after {

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0 -539px ;

}

progress.monkey[value^="8"]+ .after {

background:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif') 0 -616px ;

}

progress.monkey[value^="9"]+ .after {

background: url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif')0 -693px ;

}

进度条的数值变化时，这些规则就会应用起来，这一切通过^= attribute规则完成。因为进度条的值从0增加到100，而进度条每次增加十个值。猴子不会出现在IE8或更低的版本中，因为这些版本不支持^= attribute选择符。

注意如果CSS允许我们结合CSS3 calc[] and attr[]属性，操作会更简单。

/*

* Don't try this - it doesn't work in anybrowser, but it would be nice if it did.

*/

progress.monkey::after{

background-image:url('/blog/wp-content/uploads/2011/12/monkeyBlit.gif');

background-position-x: 0;

background-position-y: calc(-77 *attr(value), 'px');

}

点击查看动态效果（http://www.useragentman.com/examples/progress/blit.html）

速度计

最后一个示例与众不同，是用速度计显示进度。这种效果适用于所有浏览器，除IE8以及更低的版本。

这个效果的CSS类似于上面动态猴子的示例，只是里面添加了一张指针图示。

<divid="progressContainer">

<progress id="rot"class="example_r" min="0" max="100"value="60"></progress>

<div data-arrow-for="rot"class="arrow"><imgsrc="/blog/wp-content/uploads/2012/01/hand.png" /></div>

</div>

两个标签分别用定位容器<div>包装。这样就可以对进度条和箭头定位，使其一致。这里用border-radius和（http://www.flickr.com/photos/listener42/4991330345/）中截取的部分图片做效果。

progress.example_r {

/* gets rid of default border in Firefoxand Opera. */

border: solid 1px black;

display: inline-block;

/* Produces the semi-circle */

border-radius: 238px238px 0 0;

/* Dimensions */

width: 238px;

height: 126px;

padding: 0;

}

然后用CSS转换使箭头出现动态效果：

}

progress.example_r[value^="1"]:not([value="1"]):not([value="100"]) + .arrow {

 -moz-transform: rotate(288deg);

 -webkit-transform: rotate(288deg);

 -o-transform: rotate(288deg);

 -ms-transform: rotate(288deg);

}

progress.example_r[value^="2"]:not([value="2"]) + .arrow {

 -moz-transform: rotate(306deg);

 -webkit-transform: rotate(306deg);

 -o-transform: rotate(306deg);

 -ms-transform: rotate(306deg);

}

progress.example_r[value^="3"]:not([value="3"]) + .arrow {

 -moz-transform: rotate(324deg);

 -webkit-transform: rotate(324deg);

 -o-transform: rotate(324deg);

 -ms-transform: rotate(324deg);

}

progress.example_r[value^="4"]:not([value="4"]) + .arrow {

 -moz-transform: rotate(342deg);

 -webkit-transform: rotate(342deg);

 -o-transform: rotate(342deg);

 -ms-transform: rotate(342deg);

}

progress.example_r[value^="5"]:not([value="5"]) + .arrow {

 -moz-transform: rotate(360deg);

 -webkit-transform: rotate(360deg);

 -o-transform: rotate(360deg);

 -ms-transform: rotate(360deg);

}

progress.example_r[value^="6"]:not([value="6"]) + .arrow {

 -moz-transform: rotate(378deg);

 -webkit-transform: rotate(378deg);

 -o-transform: rotate(378deg);

 -ms-transform: rotate(378deg);

}

progress.example_r[value^="7"]:not([value="7"]) + .arrow {

 -moz-transform: rotate(396deg);

 -webkit-transform: rotate(396deg);

 -o-transform: rotate(396deg);

 -ms-transform: rotate(396deg);

}

progress.example_r[value^="8"]:not([value="8"]) + .arrow {

 -moz-transform: rotate(414deg);

 -webkit-transform: rotate(414deg);

 -o-transform: rotate(414deg);

 -ms-transform: rotate(414deg);

}

progress.example_r[value^="9"]:not([value="9"]) + .arrow {

 -moz-transform: rotate(432deg);

 -webkit-transform: rotate(432deg);

 -o-transform: rotate(432deg);

 -ms-transform: rotate(432deg);

}

progress.example_r[value="100"] + .arrow {

 -moz-transform: rotate(450deg);

 -webkit-transform: rotate(450deg);

 -o-transform: rotate(450deg);

 -ms-transform: rotate(450deg);

}

如果一起使用calc[]和attr[]的话，CSS会短一点。注意这个示例在Opera中显示得不太好，因为不能吧进度条的颜色值改成绿色。点击查看效果（http://www.useragentman.com/examples/progress/rotate.html）

小结

1.不能在progress要素上使用:before/: :before或:after/ :after伪要素。原因暂时未知。

2.Safari 5.0以及更低的版本不能使用多填充，因此你必须使用<progress>标签中的HTML备用方法。

3.似乎不能将Opera进度条的颜色值进行风格设置。

4.将边框应用到进度条时，多填充会出现bug。修复参考（https://github.com/zoltan-dulac/HTML5-Progress-polyfill）。

原文链接：

http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/