vue根据值实现进度条动画加载

<template>
  <div>
    {{ uploadPrecent }}%
    <div class="display-upload-wrapper">
      <div class="innier-upload-wrapper" :style="`background-size: ${this.uploadPrecent}%;`">
        自定义的upload样式
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Myupload",
  data() {
    return {
      uploadPrecent: 30,
    };
  },
};
</script>

<style lang="less" scoped>
.display-upload-wrapper {
  border: 1px solid red;
  height: 54px;
  width: 244px;
  border-radius: 4px;
  background: #f4f8ff;
  .innier-upload-wrapper {
    height: 100%;
    background: linear-gradient(#ff0, #ff0);
    background-repeat: no-repeat;
  }
}
</style>