Loading Indicator

Component 42

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Loading Indicator to your project and fits it to your theme.

Code

How Loading Indicator is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}