CSS
Install
Use this as a template path now; later it can map to a real registry package.
pnpm dlx shadcn@latest add @squadkode/ui-lab/orbit-loaderUsage (with your settings)
A compact React example generated from this template data.
import "./orbit-loader.css"; export function OrbitLoader() { return ( <div className="sk-pulse-loader" role="status" aria-label="Loading"> <span /><span /><span /> </div> );}Code
Switch between HTML, CSS, TSX, and Astro versions.
<div class="sk-pulse-loader" role="status" aria-label="Loading"> <span></span><span></span><span></span></div>.sk-pulse-loader { display: inline-flex; align-items: center; gap: .45rem;} .sk-pulse-loader span { width: 11px; height: 11px; border-radius: 50%; background: #d5abff; animation: sk-pulse .7s ease-in-out infinite alternate;} .sk-pulse-loader span:nth-child(2) { animation-delay: .12s; }.sk-pulse-loader span:nth-child(3) { animation-delay: .24s; } @keyframes sk-pulse { to { transform: translateY(-8px); opacity: .45; }}import "./orbit-loader.css"; export function OrbitLoader() { return ( <div className="sk-pulse-loader" role="status" aria-label="Loading"> <span /><span /><span /> </div> );}---// Orbit Loader--- <div class="sk-pulse-loader" role="status" aria-label="Loading"> <span></span><span></span><span></span></div> <style>.sk-pulse-loader { display: inline-flex; align-items: center; gap: .45rem;} .sk-pulse-loader span { width: 11px; height: 11px; border-radius: 50%; background: #d5abff; animation: sk-pulse .7s ease-in-out infinite alternate;} .sk-pulse-loader span:nth-child(2) { animation-delay: .12s; }.sk-pulse-loader span:nth-child(3) { animation-delay: .24s; } @keyframes sk-pulse { to { transform: translateY(-8px); opacity: .45; }}</style>Copy Prompt
Use this prompt to recreate or extend the element with the same intent.
Create a polished Orbit Loader component for a modern Astro or React website. Requirements: - Match the SquadKode visual system with clean spacing, 8px card radius, accessible labels, and responsive behavior. - Provide HTML, CSS, TSX, and Astro versions. - Keep the component lightweight, semantic, and easy to copy into a production page. - Include notes for accessibility, reduced motion, and where this pattern works best. Context: A circular progress motif for preview panes and async widgets.
Variations
1 related patterns from this category.
Implementation Notes
Small details that make this template useful in production pages.
CSS-only rotation
Compact SVG-free visual
Good for loading previews