Loader
FeedbackAnimated spinner with three size variants.
Three animation styles for loading states. oval is the default spinning ring. dots shows bouncing dots. bars shows rising bars. Respects prefers-reduced-motion.
Usage
import { Loader } from "nosible-ux"
export default function Example() {
return <Loader />
}Examples
All variants
Scanning signalsScanning signalsScanning signals
Sizes
LoadingLoadingLoadingLoading
Accessibility
Renders <span role="status">. The label prop provides an accessible name via VisuallyHidden. Animations are suppressed when prefers-reduced-motion: reduce is set.
Props
| Name | Type | Default | Description |
|---|---|---|---|
color | string | undefined | "var(--c-neo-green)" | Spinner color. |
label | string | undefined | "Loading" | Accessible label for screen readers. |
size | "xs" | "sm" | "md" | "lg" | null | undefined | — | |
variant | "oval" | "dots" | "bars" | undefined | "oval" | Visual style of the loader. |