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>