sposchedule

1
<script setup>
2
  import { computed } from 'vue';
3
  import { useLoadingStore } from '../stores/loading';
4

5
  const loadingStore = useLoadingStore();
6
  const isLoading = computed(() => loadingStore.isLoading);
7
</script>
8

9
<template>
10
  <div v-if="isLoading" class="loading-bar">
11
    <div class="loading-progress" />
12
  </div>
13
</template>
14

15
<style scoped>
16
  .loading-bar {
17
    position: fixed;
18
    top: 0;
19
    left: 0;
20
    width: 100%;
21
    height: 2px;
22
    /* background: rgba(255, 0, 0, 0.212); */
23
    display: flex;
24
    align-items: center;
25
    justify-content: flex-start;
26
    z-index: 5000;
27
  }
28

29
  .loading-progress {
30
    height: 100%;
31
    background-color: #007bff;
32
    animation: loading 2s infinite;
33
  }
34

35
  @keyframes loading {
36
    0% {
37
      width: 0%;
38
    }
39

40
    50% {
41
      width: 50%;
42
    }
43

44
    100% {
45
      width: 100%;
46
    }
47
  }
48

49
  .loading-time {
50
    margin-left: 10px;
51
    font-size: 12px;
52
  }
53
</style>
54