若要制作一个条纹进度条，我们应该把.bar-fill重新命名为.bar-fill-stripes。我们将使用backgrou-image属性里的 linear-gradient同时声明它的颜色。剩余的CSS3动画效果也是和上述相同，看下面的代码：
.bar-fill-stripes {
height:15px
display:block
background:#e74c3c
width:0
border-radius:8px
background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent)
-webkit-transition:width .8s ease
-moz-transition:width .8s ease
transition:width .8s ease
-webkit-animation:progressbar 7s infinite
animation:progressbar 7s infinite
}
如果不考虑IE的话，用css3应该不难：1、边框用背景图或纯色都可以，配合圆角和阴影；2、里面的进度条可以用垂直方向的线性渐变及阴影配合实现；3、最后配合js动态修改里面进度条div的宽度和文字的显示即可。这样写吧：<div class="meter">
<span style="width: 25%"></span>
</div>
.meter {
height: 20px /* Can be anything */
position: relative
background: #555
-moz-border-radius: 25px
-webkit-border-radius: 25px
border-radius: 25px
padding: 10px
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3)
}
.meter >span {
display: block
height: 100%
border-top-right-radius: 8px
border-bottom-right-radius: 8px
border-top-left-radius: 20px
border-bottom-left-radius: 20px
background-color: rgb(43,194,83)
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
)
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4)
position: relative
overflow: hidden
}
.orange >span {
background-color: #f1a165
background-image: linear-gradient(to bottom, #f1a165, #f36d0a)
}
.red >span {
background-color: #f0a3a3
background-image: linear-gradient(to bottom, #f0a3a3, #f42323)
}
.meter >span:after {
content: ""
position: absolute
top: 0left: 0bottom: 0right: 0
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
)
z-index: 1
background-size: 50px 50px
animation: move 2s linear infinite
border-top-right-radius: 8px
border-bottom-right-radius: 8px
border-top-left-radius: 20px
border-bottom-left-radius: 20px
overflow: hidden
}
