基于vue2结合Ant Design of Vue a-progress组件实现loading bar（动态加载进度条）组件

最新推荐文章于 2025-11-14 01:05:47 发布

原创最新推荐文章于 2025-11-14 01:05:47 发布 · 4.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css3

本文介绍了一个Vue组件，用于创建一个动态加载的进度条。组件包含百分比显示和文字提示，并能根据外部传入的参数更新进度。在实际应用中，通常通过定时器或轮询接口获取后台数据来动态更新进度。示例展示了如何在页面中引入并使用该组件，以及如何通过`setInterval`模拟进度变化。

先看效果图

在这里插入图片描述

组件代码


<template>
  <div class="loadings" v-show="isShow">
    <div class="c-loading">
   <a-progress :strokeWidth="25" :percent="percent" />
    <div class="loadtext">{{ text }}</div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // percent:0,
    };
  },
  props: {
    isShow: Boolean,
    //传入的文字
    text: {
      type: String,
      default: `文件正在上传中...`,
    },
    //传入进度
    percent:{
        type: Number,
        default: 10,
    }
  },
  mounted() {
    //  setInterval(() => {
    //   this.percent+=10
    // }, 1000);
  },
  methods: { 
   
  },
};
</script>
 
<style lang="less"  scope>
//自定义组件样式
 .ant-progress-bg{
     height: 28px;
    border-radius: 14px;
    background: #409eff;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-image: -o-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
}
.loadings {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 10000;
  @keyframes mymove {
    from {
      width: 0px;
    }
    to {
      width: 300px;
    }
  }
  .c-loading {
    width: 300px;
   
  }
  
  .loadtext {
    margin: 10px 0px 0px 88px;
  }
  .ant-progress-text{
    color: #fff;
  }
}
</style>

如何使用

在需要的页面引入

<template>
    <div>
      <Loading
        :percent="percent"
        :text="$t('m.uploading')"
        :isShow="isimport"
      /></div>
      </template>
import Loading from "../../components/loading.vue";
 components: {
    Loading
  },
  .......

如何动态的生成进度条

通过setInterval动态设置percent

  setInterval(() => {
      this.percent+=10
    }, 1000);

在实际运用场景中，一般都是通过轮询调后端接口，查询后端写入进度，然后通过setInterval动态设置percent。