┌─ ASTRO ────────────────────────────────────────────────────────────────────┐│ --- ││ // Cycles | / - \ in place. Astro dedupes the script across instances, ││ // so every [data-spinner] on the page ticks from one interval. ││ --- ││ <span class="spinner" data-spinner aria-hidden="true">|</span> ││ ││ <script> ││ const FRAMES = "|/-\\"; ││ let i = 0; ││ setInterval(() => { ││ i = (i + 1) % FRAMES.length; ││ for (const el of document.querySelectorAll("[data-spinner]")) el.textContent = ││ FRAMES[i]; ││ }, 150); ││ </script> │└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ASTRO ──────────────────────────────┐│ --- ││ // Cycles | / - \ in place. Astro dedupes th ││ e script across instances, ││ // so every [data-spinner] on the page ticks ││ from one interval. ││ --- ││ <span class="spinner" data-spinner aria-hidd ││ en="true">|</span> ││ ││ <script> ││ const FRAMES = "|/-\\"; ││ let i = 0; ││ setInterval(() => { ││ i = (i + 1) % FRAMES.length; ││ for (const el of document.querySelectorA ││ ll("[data-spinner]")) el.textContent = FRAME ││ S[i]; ││ }, 150); ││ </script> │└──────────────────────────────────────────────┘