Animation
A list of example Redpanda loading animations.
Powered by
LottieInstallation
npx shadcn@latest add @redpanda/loading-animationpnpm dlx shadcn@latest add @redpanda/loading-animationyarn dlx shadcn@latest add @redpanda/loading-animationbunx shadcn@latest add @redpanda/loading-animationnubx shadcn@latest add @redpanda/loading-animationaube dlx shadcn@latest add @redpanda/loading-animationWhen to use
Loading animations provide visual feedback during asynchronous operations and loading states. Use this decision tree to determine when it’s appropriate:
Usage
import { LoadingAnimation } 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 progress={50} /></LoadingAnimation>SVG children receive their own explicit props; LoadingAnimation does not inspect or clone them.
Auto-playing Loading Animation
<LoadingAnimation type="svg"> <LoadingBarComponent /></LoadingAnimation>Props
type'lottie' | 'svg'
The type of animation to render
'lottie' | 'svg'data?unknown
Animation data for Lottie animations
unknownchildren?React.ReactNode
Child components to render (typically for SVG animations)
React.ReactNodeprogress?number
Controlled Lottie progress (0–100). Pass progress explicitly to SVG children; the container does not clone or rewrite them.
numberscale?number
Scale factor for the animation
numberlottieOptions?LoadingAnimationLottieOptions
Options to pass to the Lottie animation
LoadingAnimationLottieOptionswidth?string | number
Width of the animation container
string | numberheight?string | number
Height of the animation container
string | numberaspectRatio?string
Aspect ratio of the animation container
stringresponsive?boolean
Whether the animation should be responsive
booleantruecentered?boolean
Whether the animation should be centered
booleantrueclassName?string
Additional CSS classes to apply
stringstyle?React.CSSProperties
Inline styles to apply
React.CSSPropertiesExamples
Loading Redpanda (loading bar)
Running Redpanda (treadmill)
Running Redpanda
Credits
- We use the work from Ben Weinstein for all complex Lottie-based animations.