使用CSS实现用白色竖线隔开的块状背景进度条

  <div class="progressBox">
    <div class="progressBar">
      <!-- 使用vue行内样式绑定进度条进度百分比 -->
      <div class="progress" style="width: 30%"></div>
    </div>
    <div class="progressText">30%</div> 
  </div>

  .progressBox {
    position: relative;
    width: 300px;
    cursor: pointer;
  }

  .progressBar {
    float: left;
    width: calc(100% - 55px);
    height: 20px;
    background-color: #f3f4f8;
  }

  .progress {
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 10px 100%;
    background-image: linear-gradient(to right, transparent, transparent 90%, #fff 90%, #fff 100%, transparent 100%);
    background-color: rgb(86, 86, 237);
  }

  .progressText {
    float: left;
    margin-left: 3px;
    width: 50px;
    text-align: left;
    height: 20px;
    line-height: 20px;
  }