Components
Ripple Circles
The RippleCircles component delivers a smooth and modern ripple-style loading animation using five concentric circles that expand and fade in a staggered sequence. Each circle features subtle gradients, semi-transparent borders, and a gentle backdrop blur, creating a calm, water-like ripple effect that blends seamlessly with both light and dark themes. Its elegant, minimalist design makes it ideal for loading screens, splash pages, or background indicators, offering a visually appealing and soothing way to indicate progress or waiting states without overwhelming the user interface.
"use client";
import * as React from "react";
import { RippleCircles } from "@/components/ui/ripple-circles";
export default function RippleCirclesDemo() {
return (
<div className="flex min-h-screen items-center justify-center transition-colors">
<RippleCircles />
</div>
);
}
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.