Components
Loading preview...
The LoadingCircle component is a minimal yet visually engaging loading indicator that creates a ripple effect with eight concentric circles. Each circle expands and fades in a staggered sequence using custom CSS animations, producing a smooth and modern ripple motion that feels light and dynamic. Designed with a glassmorphic gradient and subtle backdrop blur, it adapts seamlessly to both light and dark themes for a polished appearance. Perfect for splash screens, data-fetching states, or background loaders, the Loader delivers an elegant visual cue to keep users engaged while content is being prepared.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/loading-circle"use client";
import * as React from "react";
import { LoadingCircle } from "@/components/ui/loading-circle";
export default function LoadingCircleDemo() {
return (
<div className="flex min-h-screen items-center justify-center transition-colors">
<LoadingCircle />
</div>
);
}