css条纹进度条

<style type="text/css">
 .progressbar {
    position: relative;
    width: 160px;
    height: 22px;
    background: linear-gradient(-90deg, #fff 36%, #000 28%, #000 67%, #fff 25%);
    background-size: 10px 22px;
 }
 .progress {
    position: absolute;
    z-index: 3;
    right: 0; 
    width: 30%;
  }
  .bg-status {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, #fff 36%, #088AFE 28%, #088AFE 67%, #fff 25%);
    background-size: 10px 22px;
  }
  .bg-normal,
  .progress {
    height: 100%;
    background: linear-gradient(-90deg, #fff 36%, #000 28%, #000 67%, #fff 25%);
    background-size: 10px 22px;
  }
</style>
<div class="progressbar">
  <div class="progress"></div>
  <div class="bg-status"></div>
  <div class="bg-normal"></div>
</div>