//只有 progress pregress-par bar,进度条不会转,
//增加 active 这个类,进度条会转,
//html结构
<div class='progress active'> <div class='progress-par bar' style='80%;'></div> </div>
//css
.progress { 100%; height: 8px; background-color: #e8e8e8; border-radius: 6px; margin-top: 8px; overflow: hidden; } .progress-par { background-color: #fb4748; 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; 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; }