vue数据可视化大屏 开发中，需要一个进度条的效果，这里使用的是两个图片来实现的，一个背景图，还有一个进度条背景图。然后增加一个长度限制，默认是0每10毫秒增加1直到增加到给定的百分比停止，形成一个渐变的动画。

更多进度条效果实例

vue 数据可视化大屏进度条效果实例

使用

<progressBar :progress="50" :number="500"></progressBar>

组件代码

/**
* @Author: 858834013@qq.com
* @Name: tabs
* @Date: 2023年03月02日
* @Desc:

*/
<template>
  <div class="tabs">
    <div class="tabsInner" :style="{width:width+'%'}"></div>
    <div class="Num">{{ number }}</div>
  </div>
</template>

<script>
export default {
  name: "tabs",
  props: {
    progress: {
      type: Number,
      default() {
        return 10;
      }
    },
    number: {
      type: Number,
      default() {
        return 0;
      }
    },
  },
  data() {
    return {
      time: null,
      width: 0
    }
  },
  watch: {
    number() {
      this.getActive()
    },
  },
  mounted() {
    var that = this;
    setTimeout(() => {
      that.getActive()
    }, 1500)
  },
  methods: {
    getActive() {
      this.width = 0
      this.time = setInterval(() => {
        if (this.width >= this.progress) {
          clearInterval(this.time);
        } else {
          this.width += 1
        }
      }, 10)
    },
    getactive(e) {
      this.$emit('update:active', e)
    },
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  background: url("../assets/jindubg.png") no-repeat;
  background-size: 100% 100%;
  height: 19px;
  width: 100%;
  position: relative;

  .tabsInner {
    position: relative;
    left: 0;
    height: 15px;
    width: calc(100% - 50px);
    background: url("../assets/jindubg2.png") no-repeat;
    background-size: 180px 100%;
  }

  .Num {
    font-size: 16px;
    font-family: DIN-Bold;
    font-weight: bold;
    color: #0BFFF1;
    margin-left: 10px;
  }
}
</style>

组件下载