纯CSS3进度条制作-Pure CSS3 Progress Bar

1.效果分析

纯CSS3实现进度条的制作，效果如下图所示，详见----demo----

2.难点分析

圆角边框，内阴影，

渐变填充实现斜纹效果

斜纹动画

3.实现步骤

a.html架构

<div class="progressBar blue stripes">
      <span></span>
</div>
<div class="progressBar orange stripes">
      <span></span>
</div>

b.进度条母条.progressBar的实现

.progressBar{
	margin: 50px auto;
	padding: 5px;
	width: 360px;
	height: 20px;
	background-color: #1a1a1a;
	border-radius: 4px;
	box-shadow: 0 1px 5px #000 inset;
}

c.进度条字条span的实现

.progressBar span{
	display: inline-block;
	height: 100%;
	width: 60%;
	background-color: #777;
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
	transition:all .5s ease;
	position: relative;
	z-index: 1;
}
.progressBar:hover span{
	width: 100%;
	cursor: pointer;
}

d.不同颜色的变化

.blue span{
	background-color: #34c2e3;
}
.orange span{
	background-color: #fecf23;
	background-image: linear-gradient(top, #fecf23, #fd9215);
}

e.斜条纹实现

.stripes span{
	background-size: 30px 30px;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);
	animation: stripesAnimate 1s linear infinite;
}
@keyframes stripesAnimate{
	0%{background-position:0 0;}
	100%{background-position: 60px 0;}
}
.stripes:hover span{
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);
}

完工，感谢 w3cplus大漠，感谢 www.red-team-design.com。

深入阅读：

》css3-progress-bars

》how-to-create-progress-bar-with-css3

》Pure-CSS-Animated-Progress-Bar

》30-css3-progress-bars-100-free-for-download

》Very Beautiful CSS3 And JQuery progress bar

》pure-css-progress-bar-with-javascript-for-animation

》progress-bars

》让人不得不爱的进度条设计

》动态进度条及百分比显示