//样式
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color:antiquewhite;
}
.bigBox {
width: 600px;
height: 300px;
padding: 50px;
margin: 0px auto;
border-radius: 10px;
background: rgba(255,255,255,0.6);/*渐变*/
border: 1px solid #eee;
}
.bigBox .testone {
margin-bottom: 40px;
}
.testone {
width: 500px;
margin: 0px auto;
height: 61px;
border-radius: 5px;
background-color: #282f32;
padding: 4px 5px;
box-shadow: inset 3px 0px 10px rgba(0,0,0,0.1);
}
.colour {
height: 60px;
border-radius: 5px;
white-space: nowrap;
overflow: hidden;
margin-top: -9px;
}
.undernerth {
width: 200%;
background: url('../../Content/image/lines.svg') repeat-x;
height: 120%;
text-align: center;
margin-top: -35px;
overflow: hidden;
border-radius: 50px;
-webkit-animation: moveBars 1s linear infinite;
-moz-animation: moveBars 1s linear infinite;
-o-animation: moveBars 1s linear infinite;
animation: moveBars 1s linear infinite;
font-weight: bold;
color: #fff;
font-size: 18px;
text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.intnumber {
text-align: center;
font-family: '华文行楷', sans-serif;
font-weight: bold;
position: relative;
top: 9px;
font-size: 30px;
text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
color: #fff;
z-index: 9999;
}
.green {
background-color: #8ac320;
box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #79aa1e , 0 7px 0 #628c14;
}
.blue {
background-color: #20b9c3;
box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #1e8aaa, 0 7px 0 #13768c;
}
.red {
background-color: #dc6565;
box-shadow: inset 0px 4px 40px rgba(255,255,255,0.2), 0 10px 10px -5px #d23333, 0 7px 0 #8c1212;
}
@@-webkit-keyframes moveBars { 100% { margin-left: -180px; } }/*webkit浏览器*//*也支持谷歌*/
@@-moz-keyframes moveBars { 100% { margin-left: -180px; } }/*火狐*/
@@-ms-keyframes moveBars { 100% { margin-left: -180px; } }/*IE*/
</style>
//进度条盒子
<body>
<div class="bigBox">
<div class="testone">
<div class="colour green" style="width: 40%;">
<div class="intnumber">
40%
</div>
<div class="undernerth"></div>
</div>
</div>
<div class="testone">
<div class="colour blue" style="width: 60%">
<div class="intnumber">
60%
</div>
<div class="undernerth"></div>
</div>
</div>
<div class="testone">
<div class="colour red" style="width: 80%">
<div class="intnumber">
80%
</div>
<div class="undernerth"></div>
</div>
</div>
</div>
</body>
效果图显示: