Components
Loading Indicator
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.
import SqueezeLoader from "@/components/ui/loading-indicator";
const settings = {
size: 80,
spinDuration: 8,
squeezeDuration: 2,
};
export default function DemoOne(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div>
{/* Default loader */}
<SqueezeLoader />
{/* Alternative configurations - uncomment to see variations */}
{/*
<SqueezeLoader
size={s.size}
color1="#9b59b6"
color2="#f39c12"
spinDuration={s.spinDuration}
squeezeDuration={s.squeezeDuration}
/>
<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>
);
}