css 实现进度

    <div class="processDiv one">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="processDiv two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="processDiv three">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="processDiv">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

.processDiv {
    display: flex;
    border: 1px solid rgb(26, 54, 153);
    width: 100px;
    height: 35px;
    justify-content: space-around;
    background-image: linear-gradient(to right, #01c4f9, #c135ff);
    &.three {
      div:nth-child(n + 4) {
        background-color: rgb(9, 24, 79);
      }
    }
    &.two {
      div:nth-child(n + 3) {
        background-color: rgb(9, 24, 79);
      }
    }
    &.one {
      div:nth-child(n + 2) {
        background-color: rgb(9, 24, 79);
      }
    }
    div {
      box-sizing: border-box;
      border: 1px solid rgb(9, 24, 79);
      width: 25%;
    }
  }

效果如下图

第二种

<div class="processDiv one">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="processDiv two">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="processDiv three">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="processDiv four">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

.processDiv {
    display: flex;
    border: 1px solid rgb(26, 54, 153);
    width: 100%;
    height: 80%;
    justify-content: space-around;
    // background-image: linear-gradient(to right, #01c4f9, #c135ff);
    &.four{
      div:nth-child(-n+4) {
        background-color: green;
      }
    }
    &.three{
      div:nth-child(-n+3) {
        background-color: yellow;
      }
    }
    &.two{
      div:nth-child(-n+2) {
        background-color: #FF8000
      }
    }
    &.one{
      div:nth-child(1) {
        background-color: red;
      }
    }
    div {
      box-sizing: border-box;
      border: 1px solid rgb(9, 24, 79);
      width: 25%;
    }
}

效果如下图