css绘制进度条，持续转动的进度条

//只有 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;
}