loading-dots.svelte RawHistoryFolder

1<!-- A reusable loading dots component with animated dots -->
2<script lang="ts">
3    let { text = 'Chargement', color = 'inherit' } = $props();
4</script>
5
6<div class="loading-text" style="color: {color}">
7    {text}<span class="dots"><span>.</span><span>.</span><span>.</span></span>
8</div>
9
10<style>
11    .loading-text {
12        display: inline-flex;
13        align-items: center;
14        font-size: inherit;
15    }
16
17    .dots {
18        display: inline-flex;
19        margin-left: 2px;
20    }
21
22    .dots span {
23        animation: dots 1.5s infinite;
24        opacity: 0;
25    }
26
27    .dots span:nth-child(1) {
28        animation-delay: 0s;
29    }
30
31    .dots span:nth-child(2) {
32        animation-delay: 0.5s;
33    }
34
35    .dots span:nth-child(3) {
36        animation-delay: 1s;
37    }
38
39    @keyframes dots {
40        0% {
41            opacity: 0;
42        }
43        50% {
44            opacity: 1;
45        }
46        100% {
47            opacity: 0;
48        }
49    }
50</style>