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

//只有 progress pregress-par bar，进度条不会转，

//增加 active 这个类，进度条会转，

//ht作一新求抖直微圈ml结构

//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;

}

本文来源于网络：查看 >https://www.cnblogs.com/xiaosuibu/p/6742715.html