<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态进度条</title>
<style>
.wrap{
width: 200px;
height: 23px;
border-radius: 10px;
/*background: #ffe9ca;*/
background: linear-gradient(90deg,#ffa84b,#ff7a0c);
overflow: hidden;
}
.wrap .pro{
width: 200px;
height: 23px;
/*way1 不论条纹角度如何，创建双条纹时都需要用到4个色标*/
background: -webkit-repeating-linear-gradient(-30deg,#ffa84b 0, #ffa84b 10px,#ffb668 10px,#ffb668 20px);
/*way2*/
/*background: #ff790c;/*该处为纯色，linear-gradient起不了作用，可将背景色设置到父元素*/
background-image: repeating-linear-gradient(-30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 10px,
transparent 0, transparent 20px);
-webkit-animation: move 5s linear infinite;
}
@-webkit-keyframes move{
0%{
background-position: 0 0 ;
}
100%{
background-position: -200px 0;
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="pro">1</div>
</div>
</body>
</html>
