nocodb/packages/nc-gui/components/Loader.vue

<template>
  <v-overlay :value="message" z-index="99999" opacity=".9">
    <div class="d-flex flex-column align-center">
      <v-progress-circular v-if="progress !== null" :rotate="360" :size="100" :width="15" :value="progress">
        {{ progress }}%
      </v-progress-circular>

      <v-progress-circular v-else indeterminate size="100" width="15" class="mb-10" />
      <span class="title">{{ message }}</span>
    </div>
  </v-overlay>
</template>

<script>
export default {
  name: 'Loader',
  props: {},
  computed: {
    message() {
      return this.$store.state.loader.message;
    },
    progress() {
      return this.$store.state.loader.progress;
    },
  },
};
</script>

<style scoped></style>