vue自己实现进度条

<template>

  <div class="progressContainer">

    <div class="progress" :style="{ width: progress + '%' }">

      <b>{{ progress }}%</b>

    </div>

  </div>

</template>

<script>

export default {

  name: "details",

  data() {

    return {

      progress: 70,

    };

  },

  methods: {},

  created() {},

};

</script>

<style scoped>

.progressContainer {

  height: 20px;

  width: 96%;

  border-radius: 10px;

  background-color: #ddd;

  margin-left: 2%;

}

.progress {

  background-color: #1c8de0;

  border-radius: 10px;

  height: 20px;

  line-height: 20px;

}

b {

  color: #f00;

  font-weight: 100;

  font-size: 12px;

  position: absolute;

  left: 40%;

}

</style>