Loader
Usage
Properties
Size
Color
Options Usage
Composite
import { Loader } from "@/ui/loader";
export function LoaderDemo() {
return <Loader variant="spinner" size={12} color="hsl(var(--constructive))" />;
}Direct Component
import { LoaderSpinner } from "@/ui/loader";
export function LoaderDemo() {
return <LoaderSpinner size={12} color="hsl(var(--constructive))" />;
}API References
Styles API
type T =
| "saturation"
| "body"
| "slider"
| "root"
| "sliders"
| "sliderOverlay"
| "thumb"
| "saturationOverlay"
| "swatches"
| "swatch"
| "preview"
| "alphaOverlay"
| "shadowOverlay"
| "colorOverlay"
| "childrenOverlay";| Styles API | Type | Default | Annotation |
|---|---|---|---|
unstyled? | Partial<Record<T, boolean>> | false | if true, all default styles will be removed |
classNames? | Partial<Record<T, string>> | undefined | Set className for T |
styles? | Partial<Record<T, CSSProperties>> | undefined | Set style for T |
Props API
| Props API | Type | Default | Annotation |
|---|---|---|---|
variant? | "spinner" | "orbit" | "clockwise" | "dots" | "buffer" | "rises" | spinner | variant of loader |
unstyled? | keys object by variant | undefined | |
classNames? | keys object by variant | undefined | |
styles? | keys object by variant | undefined | |
color? | React.CSSProperties["color"] | "currentColor" | (string & {}) | hsl(var(--color)) | |
size? | string | number | 20px | |
duration? | number | 1.2 |