BellGlow Loader

Component 30

About

Minimal loader with a bell that blinks softly during work and illuminates fully when done.

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

Code

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

Usage.tsx

import { BellLoader } from "@/components/ui/bell-glow-loader";

export default function DemoOne() {
  return (
     <div className="h-screen">
      <BellLoader
        autoStart                 // start loading on mount
        durationMs={3500}         // total loading time      
        doneLabel="Loaidng Completed!"        
        onComplete={() => console.log('Loading complete')}
      />
    </div>
  );
}