Components
Loading preview...
The FloatingIconsLoader component is a versatile and visually engaging React loader that animates multiple icons in a floating, staggered motion. Unlike traditional loaders, this component allows full customization: you can specify the number of icons to display, their size, and color, and even pass any React icon component to be used. Each icon follows one of three distinct animation paths, creating a dynamic and lively effect as they float, scale, and rotate smoothly across the container. Its flexible design makes it suitable for a variety of applications, from indicating loading states in dashboards and forms to adding a playful visual touch to creative websites. With full Tailwind CSS compatibility and TypeScript support, it’s easy to integrate and adapt to different themes and projects.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/floating-icons-loader"use client";
import React from "react";
import { AlarmClockPlus, Airplay, BatteryCharging } from "lucide-react";
import FloatingIconsLoader from "@/components/ui/floating-icons-loader";
const LoaderDemoPage: React.FC = () => {
return (
<div className="min-h-screen flex flex-col items-center justify-center space-y-8">
<FloatingIconsLoader count={3} size={40} color="#5c3d99" Icon={AlarmClockPlus} />
{/*<FloatingIconsLoader count={5} size={50} color="#ff4d6d" Icon={Airplay} />
<FloatingIconsLoader count={8} size={30} color="#00ffd6" Icon={BatteryCharging} />*/}
</div>
);
};
export default LoaderDemoPage;