Components
Loading preview...
This React component renders a visually appealing loading indicator using CSS animations. It features customizable size, colors, spin and squeeze durations, and allows for styling customization via className props. The loader consists of two elements that rhythmically squeeze and spin, creating a dynamic loading effect.
npx shadcn@latest add https://21st.dev/r/uniquesonu/loading-indicatorimport SqueezeLoader from "@/components/ui/loading-indicator";
export default function DemoOne() {
return <div>
{/* Default loader */}
<SqueezeLoader />
{/* Alternative configurations - uncomment to see variations */}
{/*
<SqueezeLoader
size={80}
color1="#9b59b6"
color2="#f39c12"
spinDuration={8}
squeezeDuration={2}
/>
<SqueezeLoader
size={40}
color1="#2ecc71"
color2="#e67e22"
spinDuration={15}
squeezeDuration={4}
containerClassName="bg-gray-900"
/>
<SqueezeLoader
size={100}
color1="#1abc9c"
color2="#c0392b"
spinDuration={6}
squeezeDuration={2.5}
/>
*/}
</div>;
}