Animation
A list of example Redpanda loading animations.
Made by malinskibeniaminPowered by
Installation
Loading component...
When 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 { 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
Prop
Type
Examples
Loading Redpanda (loading bar)
Loading component...
Running Redpanda (treadmill)
Loading component...
Running Redpanda
Loading component...
Credits
- We use the work from Ben Weinstein for all complex Lottie-based animations.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.