Animation

Powered by

Lottie

When to use

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

Installation

Usage

import { Animation } from "@/components/ui/loading-animation"

Lottie Animation

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

SVG Animation with Progress Control

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

Auto-playing Loading Animation

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

Props

Examples

Loading Redpanda (loading bar)

Running Redpanda (treadmill)

Running Redpanda

Credits

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