Components
The Bouncing Circles Loader is a visually engaging and highly customizable React component designed to indicate loading or processing states in web applications. It consists of multiple circular elements that rhythmically expand and contract in a staggered sequence, creating a smooth bouncing animation. Each circle’s size, color, and number can be easily configured, allowing developers to match the loader to the application's theme or brand colors. Additionally, the component supports both light and dark modes through Tailwind CSS classes, ensuring consistent appearance across different UI themes. Its flexible design makes it suitable for use as a page loader, inline loader within cards or modals, and it adds a modern, dynamic feel to any interface while signaling activity to users effectively.
npx shadcn@latest add https://21st.dev/r/ruhith369/bouncing-circles-loaderLoading preview...
// app/(components-demo)/bouncing-loader-demo.tsx
"use client";
import React from "react";
import BouncingCirclesLoader from "@/components/ui/bouncing-circles-loader";
export default function BouncingLoaderDemo() {
return (
<div className="flex flex-col items-center justify-center min-h-screen gap-8">
{/* Default loader */}
<BouncingCirclesLoader />
{/* Customized loader */}
<BouncingCirclesLoader
size={150}
circleSize={25}
circleCount={12}
color="bg-blue-500 dark:bg-blue-300"
speed={1.5}
/>
</div>
);
}