feat: added progress bar component
mellbacon committed
Jul 15, 2023 at 18:11 UTC
1fd3c825a4cefd19fc316e97112d6e2a9e354117
1 file changed
+60
src/lib/utility/ProgressBar.svelte
new
+60
@@ -0,0 +1,60 @@
1
+<script lang="ts">
2
+ export let label = "Loading...";
3
+ export let fail = false;
4
+</script>
5
+
6
+<div class="progress-bar-container">
7
+ <div class="progress-bar" id="progress-bar" class:fail></div>
8
+ <label class="label" for="progress-bar">{label}</label>
9
+</div>
10
+
11
+<style lang="scss">
12
+ .progress-bar-container {
13
+ padding: 0 20px;
14
+ margin: 5px 0;
15
+ }
16
+ .progress-bar {
17
+ width: 100%;
18
+ height: 0.5rem;
19
+ background-color: #f4f4f4;
20
+ position: relative;
21
+ &.fail {
22
+ background-color: #da1e28;
23
+ &::after {
24
+ display: none;
25
+ background-size: 0% 100% !important;
26
+ animation: none !important;
27
+ }
28
+ }
29
+ &::after {
30
+ position: absolute;
31
+ top: 0;
32
+ right: 0;
33
+ bottom: 0;
34
+ left: 0;
35
+ animation-duration: 1.0s;
36
+ animation-iteration-count: infinite;
37
+ animation-name: progress-bar;
38
+ animation-timing-function: linear;
39
+ background-image: linear-gradient(90deg,#0f62fe 12.5%,transparent 12.5%);
40
+ background-position-x: 0%;
41
+ background-size: 300% 100%;
42
+ content: "";
43
+ }
44
+ }
45
+ .label {
46
+ width: 100%;
47
+ text-align: center;
48
+ font-size: 0.9rem;
49
+ }
50
+ @keyframes progress-bar {
51
+ 0% {
52
+ background-position-x: 25%
53
+ }
54
+
55
+ 80%,
56
+ 100% {
57
+ background-position-x: -105%
58
+ }
59
+ }
60
+</style>
\ No newline at end of file