空格进度条

<div class="schedule">
  <p></p><span></span>
</div>

* {
  margin: 0;
  padding: 0;
}

.schedule {
  position: relative;
  width: 200px;
  height: 20px;
  background: #8dd9ee;
  overflow: hidden;
  margin: 50px;
}
p {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 200px;
  z-index: 5;
  background-image: repeating-linear-gradient(90deg,transparent 0%,transparent 10%, #000 10%, #000 13%);
}
span{
  position: absolute;
  top: 0;
  z-index: 2;
  left: 0;
  height: 20px;
  width: 57%;
  background: linear-gradient(90deg,yellow,red);
}