kmt/src/components/DiaogProgress.vue

<template>
  <div class="divBG">
    <div class="showDiv">
      <i class="el-icon-loading" style="font-size:32px;"/>
      <br/>
      <br/>
      <el-progress  :percentage="percentage" :text-inside="true" :stroke-width="16"></el-progress>
    </div>
  </div>
</template>
<script>
export default {
  name: "DiaogProgress",
  components: {},
  props: { visible: Boolean },
  data() {
    return {
      percentage: 0
    };
  },
  watch: {},
  computed: {
    myVisible: {
      get() {
        return visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {},
  mounted() {
    const self = this;
    self.chartsInterval = window.setInterval(async function() {
      self.percentage += 2;
      if (self.percentage > 99) {
        window.clearInterval(self.chartsInterval);
      }
    }, 200);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.divBG {
  vertical-align: middle;
  text-align: center;
  background: rgba(128, 128, 128, 0.8);
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* display: none;  */
  z-index: 20;
}
.showDiv {
  padding-top: 25%;
  height: 200px;
  width: 500px;
  margin: auto;
}
</style>