<div class="progress-bar">
<div class="progress-value">
</div>
</div>
.progress-bar {
width: 600px;
height: 20px;
border-radius: 5px;
border: 1px solid #ccc;
background: #ddd;
margin: 50px auto;
}
.progress-value {
height: 20px;
width: 400px;
background: repeating-linear-gradient(45deg, #9CF 0px, #9CF 15px, #09C 15px, #09C 30px);
background-size: 42px 20px;
/* background-repeat: no-repeat; */
/* background-position: 0px; */
animation: progress-striped 1s linear 0s infinite;
}
@keyframes progress-striped {
from {
background-position: 42px 0px;
}
to {
background-position: 0px 0px;
}
}
效果图
