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>