bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3
4 interface Props {
5 children: Snippet
6 }
7
8 let { children }: Props = $props()
9</script>
10
11<div
12 class="text-loader font-medium text-lg tracking-tight"
13 aria-busy="true"
14 aria-live="polite"
15>
16 {@render children?.()}
17</div>
18
19<style>
20 .text-loader {
21 color: transparent;
22 background: linear-gradient(
23 to right,
24 var(--color-zinc-500),
25 var(--color-zinc-50),
26 var(--color-zinc-500)
27 );
28 background-size: 200%;
29 background-clip: text;
30 display: inline;
31 width: max-content;
32 animation: pulse 1s infinite linear;
33 }
34
35 @keyframes pulse {
36 0% {
37 background-position: 100%;
38 }
39 50% {
40 background-position: 0%;
41 }
42 100% {
43 background-position: -100%;
44 }
45 }
46</style>