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