Components
Loading preview...
The LoadRipple component is a refined and elegant loading indicator that uses five concentric rippling circles to create a calming, wave-like animation. Each layer expands and fades with a staggered delay, producing a smooth, continuous ripple effect that feels dynamic yet minimalistic. Designed with gradient borders, subtle transparency, and backdrop blur, it adapts beautifully to both light and dark modes, adding a touch of sophistication to loading states. Ideal for splash screens, background loaders, or transitional states, the LoadRipple offers a visually appealing way to keep users engaged while content loads.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/load-ripple"use client";
import * as React from "react";
import { LoadRipple } from "@/components/ui/load-ripple";
export default function LoaderDemo() {
return (
<div className="flex min-h-screen items-center justify-center transition-colors">
<LoadRipple />
</div>
);
}