Components
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-indicatorLoading preview...
import 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>;
}