---
title: Animation
description: A list of example Redpanda loading animations.
icon: rotate-cw
author:
  name: malinskibeniamin
  url: https://github.com/malinskibeniamin
mode: wide
---

<PoweredBy packages={[{ name: 'Lottie', url: 'https://lottiefiles.com/' }]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/loading-animation
```

###

<ComponentPreview
  name="loading-animation-redpanda-demo"
  title="A loading animation of a Redpanda with an indeterminate progress bar."
/>

## When to use

Loading animations provide visual feedback during asynchronous operations and loading states. Use this decision tree to determine when it's appropriate:

```mermaid
graph TD
    A{Need loading feedback?} -->|Yes| B{Long operation expected?}
    A -->|No| C[ℹ️ Use instant feedback]
    B -->|Yes| D{Progress known?}
    B -->|No| E{Quick operation less than 2s?}
    D -->|Yes| F[✅ Use Progress component]
    D -->|No| G[✅ Use LoadingAnimation]
    E -->|Yes| H[⚠️ Consider no loading state]
    E -->|No| I[✅ Use LoadingAnimation]

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class F,G,I recommended;
    class H discouraged;
    class A,B,D,E decision;
    class C neutral;
```

## Usage

```tsx
import { LoadingAnimation } from '@/components/ui/loading-animation';
```

### Lottie Animation

```tsx
<LoadingAnimation
  type="lottie"
  data={animationData}
  scale={0.5}
  lottieOptions={{
    loop: true,
    autoplay: true,
  }}
/>
```

### SVG Animation with Progress Control

```tsx
<LoadingAnimation type="svg" progress={50} className="w-full h-full">
  <YourSVGComponent progress={50} />
</LoadingAnimation>
```

SVG children receive their own explicit props; `LoadingAnimation` does not inspect or clone them.

### Auto-playing Loading Animation

```tsx
<LoadingAnimation type="svg">
  <LoadingBarComponent />
</LoadingAnimation>
```

## Props

| Prop | Type | Default | Description |
| - | - | - | - |
| `type` | `'lottie' \| 'svg'` | - | The type of animation to render |
| `data?` | `unknown` | - | Animation data for Lottie animations |
| `children?` | `React.ReactNode` | - | Child components to render (typically for SVG animations) |
| `progress?` | `number` | - | Controlled Lottie progress (0–100). Pass progress explicitly to SVG children; the container does not clone or rewrite them. |
| `scale?` | `number` | - | Scale factor for the animation |
| `lottieOptions?` | `LoadingAnimationLottieOptions` | - | Options to pass to the Lottie animation |
| `width?` | `string \| number` | - | Width of the animation container |
| `height?` | `string \| number` | - | Height of the animation container |
| `aspectRatio?` | `string` | - | Aspect ratio of the animation container |
| `responsive?` | `boolean` | `true` | Whether the animation should be responsive |
| `centered?` | `boolean` | `true` | Whether the animation should be centered |
| `className?` | `string` | - | Additional CSS classes to apply |
| `style?` | `React.CSSProperties` | - | Inline styles to apply |

## Examples

### Loading Redpanda (loading bar)

<ComponentPreview
  name="loading-animation-redpanda-demo"
  title="A loading animation of a Redpanda with an indeterminate progress bar."
/>

### Running Redpanda (treadmill)

<ComponentPreview
  name="loading-animation-redpanda-running-treadmill-demo"
  title="A loading animation of a Redpanda running on a treadmill."
/>

### Running Redpanda

<ComponentPreview name="loading-animation-redpanda-running-demo" title="A loading animation of a Redpanda running." />

## Credits

- We use the work from Ben Weinstein for all complex Lottie-based animations.