1 files changed, 85 insertions, 0 deletions
diff --git a/src/components/Global/LoadingBar.vue b/src/components/Global/LoadingBar.vue
new file mode 100644
index 00000000..1d8d68a8
--- /dev/null
+++ b/src/components/Global/LoadingBar.vue
@@ -0,0 +1,85 @@
+<template>
+  <transition name="fade">
+    <b-progress
+      v-if="!isLoadingComplete"
+      :value="loadingIndicatorValue"
+      height="0.4rem"
+    />
+  </transition>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      loadingIndicatorValue: 0,
+      isLoadingComplete: false,
+      loadingIntervalId: null,
+      timeoutId: null
+    };
+  },
+  created() {
+    this.$root.$on('loader::start', () => {
+      this.startLoadingInterval();
+    });
+    this.$root.$on('loader::end', () => {
+      this.endLoadingInterval();
+    });
+    this.$root.$on('loader::hide', () => {
+      this.hideLoadingBar();
+    });
+  },
+  methods: {
+    startLoadingInterval() {
+      this.clearLoadingInterval();
+      this.clearTimeout();
+      this.loadingIndicatorValue = 0;
+      this.isLoadingComplete = false;
+      this.loadingIntervalId = setInterval(() => {
+        this.loadingIndicatorValue += 1;
+        if (this.loadingIndicatorValue > 100) this.clearLoadingInterval();
+      }, 100);
+    },
+    endLoadingInterval() {
+      this.clearLoadingInterval();
+      this.clearTimeout();
+      this.loadingIndicatorValue = 100;
+      this.timeoutId = setTimeout(() => {
+        // Let animation complete before hiding
+        // the loading bar
+        this.isLoadingComplete = true;
+      }, 1000);
+    },
+    hideLoadingBar() {
+      this.clearLoadingInterval();
+      this.clearTimeout();
+      this.loadingIndicatorValue = 0;
+      this.isLoadingComplete = true;
+    },
+    clearLoadingInterval() {
+      if (this.loadingIntervalId) clearInterval(this.loadingIntervalId);
+      this.loadingIntervalId = null;
+    },
+    clearTimeout() {
+      if (this.timeoutId) clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.4rem;
+  opacity: 1;
+  transition: opacity $duration--moderate-01 $standard-easing--productive;
+
+  &.fade-enter,
+  &.fade-leave-to {
+    opacity: 0;
+  }
+}
+</style>