vue实现分段进度条

效果图

html

 <template>
  <div class="progress">
    分段进度条
    <div class="cont">
      <div class="p" :style="{ width: a }">
        <div class="s">
          <div class="span" v-for="count in 15" :key="count"></div>
        </div>
      </div>
    </div>
    {{ a }}
  </div>
</template>

css

<style>
.progress {
  display: flex;
  align-items: center;
}
.cont {
  width: 318px;
  height: 18px;
  border: 1px solid #ccc;
  padding: 4px;
}
.p {
  height: 100%;
  background: pink;
}
.s {
  width: 318px;
  height: 100%;
  display: flex;
}
.span {
  width: 4px;
  height: 100%;
  background: #fff;
  margin-left: 16px;
}
</style>

js

<script>
export default {
  data() {
    return {
      a: "90%",
    };
  },
};
</script>

tip： 可以通过span的 margin 和 width 来改变间隔大小，for 循环 次数改变间隔多少