# AnimatedLoader

Animated dots or bars while an operation is pending.

## 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


```tsx
import { AnimatedLoader } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
function Example() {
  const [loading, setLoading] = useState(true);
  return <div style={{ display: "grid", gap: 20 }}>
    {loading ? <AnimatedLoader variant="dots" duration={700} size={8} label="Saving" /> : <p role="status">Loading complete</p>}
    <Button type="button" variant="outline" onClick={() => setLoading(!loading)}>{loading ? "Finish loading" : "Start loading"}</Button>
  </div>;
}
```


## Bars

```tsx
<AnimatedLoader variant="bars" duration={900} size={10} label="Saving" />
```


## Without motion

```tsx
<AnimatedLoader variant="dots" disabled label="Saving" />
```


## API: AnimatedLoader


```typescript
declare function AnimatedLoader({ variant, label, color, size, duration, disabled }: AnimatedLoaderProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| color | string | No | See the published type. |
| disabled | boolean | No | Disable control interaction or animation motion. |
| duration | number | No | Animation duration in milliseconds. |
| label | string | No | Text or accessible label. |
| size | number | No | Visual size of the component. |
| variant | "dots" \| "bars" | No | Visual variant. Use a value supported by this component. |

Source: https://www.kivora.pro/docs/componentes/animated-loader