Components
Loader
Animated loading indicator. Supports multiple animation styles, colors, and track colors.
import{ Loader }from"oks-ui"
7 animation styles8 color rolesCustom trackLightweight
Colors
Match the loader color to your app's theme.
Interactive Playground
Controls
Preview
Generated Code
<Button>Button</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "ring-inset" | "ring-clip" | "ring-outset" | "ring-dual" | "pulse" | "dots-roll" | "dots-sweep" | "ring-inset" | Loader animation style. |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "white" | "default" | Loader color. |
| trackColor | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "white" | "default" | Track color (for ring variants). |
| indicatorColor | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "white" | "default" | Indicator color override. |
variant"ring-inset"
"ring-inset" | "ring-clip" | "ring-outset" | "ring-dual" | "pulse" | "dots-roll" | "dots-sweep"
Loader animation style.
color"default"
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "white"
Loader color.
trackColor"default"
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "white"
Track color (for ring variants).
indicatorColor"default"
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "white"
Indicator color override.