在vue中写进度条

一、效果图

二、实现代码
progress值，代表百分百的进度

<template>
  <section>
    <div class="box">
    <div class="mo" :style="{'--progress':-progress+100+'%'}"></div>
    <div class="line-box">
      <i></i>
      <i class="line-item"></i>
      <i class="line-item"></i>
      <i class="line-item"></i>
      <i></i>
    </div>
  </div>
  <el-input-number v-model="progress" :step="10"></el-input-number>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        progress:58
      }
    }
  }

</script>

<style scoped>

  .box {
    position: relative;
    width: 500px;
    height: 20px;
    overflow: hidden;
    background: linear-gradient(270deg, #FF4D4D 0%, #FADB6D 55.73%, #70FAC8 100%);
  }

  .mo {
    position: absolute;
    z-index: 1;
    right: 0;
    height: 100%;
    width: var(--progress, 0%);
    background-color: #ccc;
  }

  .line-box {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .line-box .line-item {
    width: 1px;
    height: 100%;
    background-color: #fff;
  }

</style>