diff --git a/src/routes/ds.spinner.tsx b/src/routes/ds.spinner.tsx index dabfec744..9c0cb00a8 100644 --- a/src/routes/ds.spinner.tsx +++ b/src/routes/ds.spinner.tsx @@ -7,19 +7,36 @@ export const Route = createFileRoute('/ds/spinner')({ component: SpinnerPage, head: () => ({ meta: seo({ - title: 'Spinner | TanStack Design System', - description: 'The Spinner loading indicator.', + title: 'Spinners | TanStack Design System', + description: + 'Spinner and Headbanger loading indicators, sizing, colors, and source code.', }), }), }) function SpinnerPage() { return ( - - + + + A simple animated loading indicator. Size it with w-/h- utilities + and recolor it with text-* (it inherits currentColor). +
+ Source:{' '} + + src/components/Spinner.tsx + + . + + } + > @@ -35,7 +52,25 @@ function SpinnerPage() { + A branded pixel-art loader with a 12-frame sprite animation on a + canvas. Multi-color by design (it does not inherit currentColor); + size it with w-/h- utilities. Holds on the first frame when + prefers-reduced-motion is set. +
+ Source:{' '} + + src/components/ds/ui/PixelSpinner.tsx + + . + + } >