xref: /openbmc/webui-vue/src/components/Global/LoadingBar.vue (revision 883a0d597962dfd30d6c48319b8b33e2d0f98606) 
1<template>
2  <transition name="fade">
3    <b-progress v-if="!isLoadingComplete">
4      <b-progress-bar
5        striped
6        animated
7        :value="loadingIndicatorValue"
8        :aria-label="$t('global.ariaLabel.progressBar')"
9      />
10    </b-progress>
11  </transition>
12</template>
13
14<script>
15import { useI18n } from 'vue-i18n';
16export default {
17  data() {
18    return {
19      $t: useI18n().t,
20      loadingIndicatorValue: 0,
21      isLoadingComplete: false,
22      loadingIntervalId: null,
23      timeoutId: null,
24    };
25  },
26  created() {
27    this.$root.$on('loader-start', () => {
28      this.startLoadingInterval();
29    });
30    this.$root.$on('loader-end', () => {
31      this.endLoadingInterval();
32    });
33    this.$root.$on('loader-hide', () => {
34      this.hideLoadingBar();
35    });
36  },
37  methods: {
38    startLoadingInterval() {
39      this.clearLoadingInterval();
40      this.clearTimeout();
41      this.loadingIndicatorValue = 0;
42      this.isLoadingComplete = false;
43      this.loadingIntervalId = setInterval(() => {
44        this.loadingIndicatorValue += 1;
45        if (this.loadingIndicatorValue > 100) this.clearLoadingInterval();
46      }, 100);
47    },
48    endLoadingInterval() {
49      this.clearLoadingInterval();
50      this.clearTimeout();
51      this.loadingIndicatorValue = 100;
52      this.timeoutId = setTimeout(() => {
53        // Let animation complete before hiding
54        // the loading bar
55        this.isLoadingComplete = true;
56      }, 1000);
57    },
58    hideLoadingBar() {
59      this.clearLoadingInterval();
60      this.clearTimeout();
61      this.loadingIndicatorValue = 0;
62      this.isLoadingComplete = true;
63    },
64    clearLoadingInterval() {
65      if (this.loadingIntervalId) clearInterval(this.loadingIntervalId);
66      this.loadingIntervalId = null;
67    },
68    clearTimeout() {
69      if (this.timeoutId) clearTimeout(this.timeoutId);
70      this.timeoutId = null;
71    },
72  },
73};
74</script>
75
76<style lang="scss" scoped>
77@import '@/assets/styles/bmc/helpers/_index.scss';
78@import '@/assets/styles/bootstrap/_helpers.scss';
79
80.progress {
81  position: absolute;
82  left: 0;
83  right: 0;
84  bottom: -0.4rem;
85  opacity: 1;
86  transition: opacity $duration--moderate-01 $standard-easing--productive;
87  height: 0.4rem;
88
89  &.fade-enter, // Remove this vue2 based only class when switching to vue3
90  &.fade-enter-from, // This is vue3 based only class modified from 'fade-enter'
91  &.fade-leave-to {
92    opacity: 0;
93  }
94}
95.progress-bar {
96  background-color: $loading-color;
97}
98</style>
99