Spinner
Indicates indeterminate progress for an operation in progress.
- Status
- Beta
- Distribution
- Source via shadcn
Design
Functional preview
Loading functional preview…
Explore anatomy and visual states
Anatomy
- Track
- Indicator
Variants and states
lgmdon-colorsm
Usage
When to use
- duration is unknown and there is no content structure to anticipate.
When not to use
- progress can be measured or a Skeleton communicates the wait better.
React composition
import { Spinner } from "@/components/ui/spinner"
<Spinner aria-label="Sincronizando preferências" size="md" />Implementation
Installation
Configure the namespace once in the React integration guide.
npx shadcn@latest add @tis/spinnerpnpm dlx shadcn@latest add @tis/spinneryarn dlx shadcn@latest add @tis/spinnerbunx --bun shadcn@latest add @tis/spinnerPublic contract
- Registry item
@tis/spinner- Distribution
- Source copied into the application
- Status
- Beta
Technical architecture
- Provider
- React presentation
- Provider role
- Native or composition
- Behavioral architecture
- Base UI
- CSS
ds-tis/css
Accessibility
Semantics and behavior
Provide a contextual aria-label and avoid multiple competing status regions for one loading operation.
Consumer responsibility
- provide contextual accessible names and descriptions;
- preserve keyboard behavior, focus visibility, and semantic HTML;
- test real content, flow, and contrast in the application.
Validation evidence
Installed in the permanent React/Vite consumer and covered by production build, browser, responsive, and Axe checks.