本文主要是介绍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;
}
这篇关于css绘制进度条，持续转动的进度条的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
