CSS3+jQuery Progress Bars(CSS3进度条)

主要运动到的css3属性有：border-radius(设置圆角)、box-shadow(阴影)、transition(过渡效果)。

body,div,p{ margin:0; padding:0;}
body{
	font:13px Tahoma,Arial,sans-serif;
	background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEUqKiopKSkoKCgjIyMuLi4kJCQtLS0dJckpAAAAO0lEQVR42iXLAQoAUQhCQSvr/kfe910jHIikElsl5qVFa1iE5f0Pom/CNZdbNM6756lQ41NInMfuFPgAHVEAlGk4lvIAAAAASUVORK5CYII=");
}
p{
	color:#FAFAFA;
	text-align:center;
	text-shadow: 0 1px 0 #111;
}
a{
	color:#777;
}
a:hover{
	color:#FFF;
}

.progress-bar{
	background-color:#1a1a1a;
	width:350px; height:25px;
	padding:5px; margin:80px auto 35px auto;
	border-radius:5px;/*设置圆角*/
	-moz-border-radius:5px;/
	-webkit-border-radius:5px;/
	border-radius:5px;
	box-shadow:0 1px 5px #000 inset,0 1px 0 #444;/*设置阴影 inset内侧阴影*/
	-moz-box-shadow:0 1px 5px #000 inset,0 1px 0 #444;/
	-webkit-box-shadow:0 1px 5px #000 inset,0 1px 0 #444;/
	box-shadow:0 1px 5px #000 inset,0 1px 0 #444;
}
.progress-bar span{
	background-color:#999;
	display:inline-block;
	height:100%;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
	-moz-box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
	box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
	transition:width .4s ease-in-out;/*设置过渡效果*/
	-moz-transition:width .4s ease-in-out;
	-webkit-transition:width .4s ease-in-out;
	transition:width .4s ease-in-out;
}
/*
语法：
transition:[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

注释：
transition:[ 检索或设置对象中的参与过渡的属性 ] || [ 指定对象过渡的持续时间 ] || [ 检索或设置对象中过渡的动画类型 ] || [ 指定对象过渡的延迟时间 ]

编写方法：
transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;

拆分方法：
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
*/

/* Case 1 */
.blue span{
	background-color:#34c2e3;
}

.stripes span{
	background-size:30px 30px;
	background-image:linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);/*用线性渐变创建图像*/
	background-image:-moz-linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	background-image:-webkit-linear-gradient(135deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);
	animation:animate-stripes 3s linear infinite;
	-moz-animation:animate-stripes 3s linear infinite;
	-webkit-animation:animate-stripes 3s linear infinite;
}
/*
语法：
<linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+);
<point>:[ left | right ]? [ top | bottom ]? || <angle>?
<color-stop>:<color> [ <length> | <percentage> ]?

<point>
left:设置左边为渐变起点的横坐标值。
right:设置右边为渐变起点的横坐标值。
top:设置顶部为渐变起点的纵坐标值。
bottom:设置底部为渐变起点的纵坐标值。
<angle>:用角度值指定渐变的方向（或角度）。
<color-stop>:指定渐变的起止颜色。

<color-stop>
<color>:指定颜色。请参阅颜色值
<length>:用长度值指定起止色位置。不允许负值
<percentage>:用百分比指定起止色位置。

例句：
background-image:linear-gradient(<angle>,[<color-stop> <percentage>],[<color-stop> <percentage>]);
*/
@keyframes animate-stripes{
	0%{ background-position:0,0;}
	100%{ background-position:60px,0;}
}
@-moz-keyframes animate-stripes{
	0%{ background-position:0,0;}
	100%{ background-position:60px,0;}
}
@-webkit-keyframes animate-stripes{
	0%{ background-position:0,0;}
	100%{ background-position:60px,0;}
}

/* Case 2 */
.shine span{
	position:relative;
	background:linear-gradient(#FECF23, #FD9215);
	background:-moz-linear-gradient(#FECF23, #FD9215);
	background:-webkit-linear-gradient(#FECF23, #FD9215);
}
.shine span::after {
	content:'';
	opacity:0;
	position:absolute;
	top:0; right:0; bottom:0; left:0;
	background:#fff;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	animation:animate-shine 2s ease-out infinite;
	-moz-animation:animate-shine 2s ease-out infinite;
	-webkit-animation:animate-shine 2s ease-out infinite;
}
@keyframes animate-shine{
	0%{ opacity:0; width:0;}
	50%{ opacity:.5;}
	100%{ opacity:0; width:95%;}
}
@-moz-keyframes animate-shine{
	0%{ opacity:0; width:0;}
	50%{ opacity:.5;}
	100%{ opacity:0; width:95%;}
}
@-webkit-keyframes animate-shine{
	0%{ opacity:0; width:0;}
	50%{ opacity:.5;}
	100%{ opacity:0; width:95%;}
}

请大家使用现代浏览器访问： Firefox 5+, Chrome 6+, Safari 5+

查看演示