AnimatedLoader
Animated dots or bars while an operation is pending.
Text and Markdown example
1function Example() {
2 const [loading, setLoading] = useState(true);
3 return <div style={{ display: "grid", gap: 20 }}>
4 {loading ? <AnimatedLoader variant="dots" duration={700} size={8} label="Saving" /> : <p role="status">Loading complete</p>}
5 <Button type="button" variant="outline" onClick={() => setLoading(!loading)}>{loading ? "Finish loading" : "Start loading"}</Button>
6 </div>;
7}How to use it
Choose dots or bars and configure duration, size, color, and label. It loops while mounted and active. Render it conditionally from loading state; disabled stops motion but keeps the indicator visible.
It exposes role="status" and label as its accessible name. Translate label in your application. It does not accept delay, stagger, or replayKey; duration is in milliseconds.
Import
1import { AnimatedLoader } from "@kivora/nextjs";Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.
API reference 0.3.0
Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.
| Property | Type | Description |
|---|---|---|
color | string | Configures color. The type describes the supported values and structure. |
disabled | boolean | Disable control interaction or animation motion. |
duration | number | Animation duration in milliseconds. |
label | string | Text or accessible label. |
size | number | Visual size of the component. |
variant | "dots" | "bars" | Visual variant. Use a value supported by this component. |
TypeScript definition
Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.
AnimatedLoader6 properties
1declare function AnimatedLoader({ variant, label, color, size, duration, disabled }: AnimatedLoaderProps): React.JSX.Element;