tire-platform-ui/src/views/iosBasicData/finvouchers/components/loading.vue

<template>
  <div>
    <div class="loading-overlay" v-if="isLoading">
      <div class="loading-content">
        <el-progress type="circle" :percentage="percentage"></el-progress>
      </div>
    </div>
    <div>
      <slot>
      </slot>
    </div>
  </div>
</template>
   
<script>
export default {
  name: 'CustomLoading',
  props: {
  },
  data() {
    return {
      isLoading: false,
      percentage: 0,
      timer: null,
      timer2: null,
      timer3: null,
    };
  },
  created() {
  },
  methods: {
    getLoading() {
      this.timer = setInterval(() => {
        if (this.percentage < 60) {
          this.percentage += 1;
        } else {
          clearTimeout(this.timer);
          this.slowLoading()
        }
      }, 100);
    },
    slowLoading() {
      this.timer2 = setInterval(() => {
        if (this.percentage < 90) {
          this.percentage += 1;
        } else {
          clearTimeout(this.timer2);
          this.SlowestLoading()
        }
      }, 300);
    },
    SlowestLoading() {
      this.timer3 = setInterval(() => {
        if (this.percentage < 98) {
          this.percentage += 1;
        } else {
          clearTimeout(this.timer3);
        }
      }, 1000);
    },
    startLoading() {
      this.isLoading = true
      this.getLoading()
    },
    endLoading() {
      if (this.percentage < 60) {
        clearTimeout(this.timer);
        this.percentage = 100

      } else if (this.percentage < 98) {
        clearTimeout(this.timer2);
        this.percentage = 100

      } else {
        clearTimeout(this.timer3);
        this.percentage = 100
      }
      setTimeout(() => {
        this.percentage = 0
        this.isLoading = false
      }, 500);
    }
  }

}
</script>
   
<style scoped>
.loading-overlay {
  position: absolute;
  z-index: 2000;
  background-color: hsla(0, 0%, 100%, .9);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .3s;
}

.loading-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>