/ src / components / Throbber.svelte
Throbber.svelte
 1  <script lang="ts">
 2    let { color }: { color?: string } = $props();
 3  </script>
 4  
 5  <div
 6    class="throb h-2 w-2 rounded-xs"
 7    style:--throbber-color={color ?? "var(--color-badge-success-base)"}>
 8  </div>
 9  
10  <style>
11    @keyframes throb {
12      0% {
13        transform: scale(1);
14        box-shadow: 0 0 rgb(from var(--throbber-color) r g b / 0.5);
15      }
16  
17      70% {
18        transform: scale(1.25);
19        box-shadow: 0 0 0 2.5px transparent;
20      }
21      100% {
22        transform: scale(1);
23        box-shadow: 0 0 transparent;
24      }
25    }
26    .throb {
27      animation: throb 1.5s infinite;
28      background-color: var(--throbber-color);
29    }
30  </style>