vue3-uikit

1
<template>
2
  <div>
3
    <!-- Линейный прогресс-бар -->
4
    <div class="progress-wrapper">
5
      <h3>Linear Progress</h3>
6
      <div class="progress-bar">
7
        <div class="progress" :style="{ width: linearProgress + '%' }"></div>
8
      </div>
9
    </div>
10

11
    <!-- Круговой прогресс-бар -->
12
    <div class="progress-wrapper">
13
      <h3>Circular Progress</h3>
14
      <div class="circular-progress">
15
        <svg viewBox="0 0 36 36" class="circular-chart">
16
          <path
17
            class="circle"            
18
            :stroke-dasharray="circularProgress + ', 100'"
19
            d="M18 2.0845
20
               a 15.9155 15.9155 0 0 1 0 31.831
21
               a 15.9155 15.9155 0 0 1 0 -31.831"
22
          />
23
        </svg>
24
        <span class="circular-progress-value">{{ circularProgress }}%</span>
25
      </div>
26
    </div>
27

28
    <!-- Загрузочный прогресс-бар -->
29
    <div class="progress-wrapper">
30
      <h3>Loader Progress</h3>
31
      <div class="loader"></div>
32
    </div>
33
  </div>
34
</template>
35

36
<script>
37
import { ref, onMounted } from "vue";
38

39
export default {
40
  name: "Progress",
41
  setup() {
42
    const linearProgress = ref(0);
43
    const circularProgress = ref(0);
44

45
    const simulateProgress = () => {
46
      if (linearProgress.value < 100) {
47
        linearProgress.value += 1;
48
        circularProgress.value += 1;
49
      } else {
50
        linearProgress.value = 0;
51
        circularProgress.value = 0;
52
      }
53
    };
54

55
    onMounted(() => {
56
      setInterval(simulateProgress, 100);
57
    });
58

59
    return {
60
      linearProgress,
61
      circularProgress,
62
    };
63
  },
64
};
65
</script>
66

67
<style scoped>
68

69
.progress-wrapper {
70
  margin-bottom: 30px;
71
}
72

73
/* Линейный прогресс-бар */
74
.progress-bar {
75
  width: 100%;
76
  height: 20px;
77
  background-color: #e0e0e0;
78
  border-radius: 10px;
79
  overflow: hidden;
80
}
81

82
.progress {
83
  height: 100%;
84
  background-color: #6200ea;
85
  border-radius: 10px 0 0 10px;
86
  transition: width 0.3s ease;
87
}
88

89
/* Круговой прогресс-бар */
90
.circular-progress {
91
  position: relative;
92
  width: 100px;
93
  height: 100px;
94
}
95

96
.circular-chart {
97
  display: block;
98
  margin: 10px auto;
99
  max-width: 100%;
100
  max-height: 250px;
101
}
102

103
.circle {
104
  fill: none;
105
  stroke-width: 2.8;
106
  stroke: #6200ea;
107
  stroke-linecap: round;
108
  transition: stroke-dasharray 0.3s ease;
109
}
110

111
.circular-progress-value {
112
  font-size: 1.2rem;
113
  font-weight: bold;
114
  position: absolute;
115
  top: 50%;
116
  left: 50%;
117
  transform: translate(-50%, -50%);
118
}
119

120
/* Загрузочный прогресс-бар */
121
.loader {
122
  border: 4px solid #f3f3f3;
123
  border-top: 4px solid #6200ea;
124
  border-radius: 50%;
125
  width: 40px;
126
  height: 40px;
127
  animation: spin 2s linear infinite;
128
}
129

130
@keyframes spin {
131
  0% {
132
    transform: rotate(0deg);
133
  }
134
  100% {
135
    transform: rotate(360deg);
136
  }
137
}
138
</style>
139