LoadingIndicator.vue

<template>
  <div>
    <div v-if="show" class="indicator indicator-active" />
    <div v-else class="indicator bg-light" />
  </div>
</template>

<script lang="ts">
import useAdminStore from "@/modules/admin/store";
import useErrorStore from "@/modules/error/store";
import useLoginStore from "@/modules/login/store";
import useMainStore from "@/store";
import usePidStore from "@/modules/pid/store";
import useProjectStore from "@/modules/project/store";
import useResourceStore from "@/modules/resource/store";
import useSearchStore from "@/modules/search/store";
import useUserStore from "@/modules/user/store";

import { loadingCounterEventHandler } from "@/plugins/loadingCounter";
import { defineComponent } from "vue-demi";

export default defineComponent({
  setup() {
    const mainStore = useMainStore();

    loadingCounterEventHandler(useAdminStore);
    loadingCounterEventHandler(useErrorStore);
    loadingCounterEventHandler(useLoginStore);
    loadingCounterEventHandler(usePidStore);
    loadingCounterEventHandler(useProjectStore);
    loadingCounterEventHandler(useResourceStore);
    loadingCounterEventHandler(useSearchStore);
    loadingCounterEventHandler(useUserStore);

    return { mainStore };
  },

  computed: {
    show(): boolean {
      return this.mainStore.isLoading;
    },
  },
});
</script>

<style scoped>
.indicator {
  position: relative;
  width: 100%;
  /* Heights defined as variables in "@/assets/css/_custom.css" */
  height: var(--loading-indicator-height);
  margin-bottom: var(--loading-indicator-margin);
}
.indicator-active {
  background-color: #e9ecef;
}
.indicator-active:before {
  width: 40%;
  content: "";
  position: absolute;
  background-color: var(--primary);
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: running-progress 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
    infinite;
}
@keyframes running-progress {
  0% {
    left: 0%;
    right: 100%;
    width: 0%;
  }
  10% {
    left: 0%;
    right: 75%;
    width: 25%;
  }
  90% {
    right: 0%;
    left: 75%;
    width: 25%;
  }
  100% {
    left: 100%;
    right: 0%;
    width: 0%;
  }
}
</style>