//只有 progress pregress-par bar，进度条不会转，
//增加 active 这个类，进度条会转，
//html结构
<div class='progress active'>
<div class='progress-par bar' style='width:80%;'></div>
</div>
//css
.progress {
width: 100%;
height: 8px;
background-color: #e8e8e8;
border-radius: 6px;
margin-top: 8px;
overflow: hidden;
}
.progress-par {
background-color: #fb4748;
width: 75%;
position: relative;
height: 8px;
border-radius: 6px;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
}
.progress .bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
color: #ffffff;
text-align: center;
}
.progress .bar {
background-color: #e83030;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, #fb4748), color-stop(0.25, transparent), color-stop(0.5, transparent),
color-stop(0.5, #fb4748), color-stop(0.75, #fb4748), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(135deg, #fb4748 25%, transparent 25%, transparent 50%, #fb4748 50%, #fb4748 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, #fb4748 25%, transparent 25%, transparent 50%, #fb4748 50%, #fb4748 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, #fb4748 25%, transparent 25%, transparent 50%, #fb4748 50%, #fb4748 75%, transparent 75%, transparent);
background-image: linear-gradient(135deg, #fb4748 25%, transparent 25%, transparent 50%, #fb4748 50%, #fb4748 75%, transparent 75%, transparent);
-webkit-background-size: 10px 10px;
-moz-background-size: 10px 10px;
-o-background-size: 10px 10px;
background-size: 10px 10px;
}
.progress.active .bar {
-webkit-animation: progress-bar 2s linear infinite;
-moz-animation: progress-bar 2s linear infinite;
-ms-animation: progress-bar 2s linear infinite;
-o-animation: progress-bar 2s linear infinite;
animation: progress-bar 2s linear infinite;
}
@keyframes progress-bar {
from {
background-position: 40px 0;
}
to {
background-position: 0 0;
}
}
.progress-par:before,
.progress-par:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
}
.progress-par:after {
z-index: 2;
bottom: 0;
border-radius: 6px;
}