css3绘制进度条

 repeating-linear-gradient ：

p{
  margin: 0;
  padding:0;
  width: 200px;
  height: 20px;
  background-image:repeating-linear-gradient(45deg, red 0px, 20px, yellow 20px, 20px, blue 40px);
  background-size: 2000px 20px;
  background-position: 200px;
  animation: name 50s linear infinite;
}
@keyframes name {
  0%{
    background-position-x: 200px;
  }
  100%{
    background-position-x: 2000px;
  }
}