Signal Bars Loader

Component 41

About

An audio waveform loading indicator with configurable bars that pulse rhythmically in equalizer, waveform, or heartbeat styles.

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

Code

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

Usage.tsx

import { LoaderSignalBars } from "@/components/ui/loader-signal-bars";

export default function LoaderSignalBarsDemo() {
  return (
    <div className="flex min-h-64 flex-wrap items-center justify-center gap-12 p-8">
      <div className="flex flex-col items-center gap-3">
        <LoaderSignalBars variant="equalizer" />
        <span className="text-xs text-muted-foreground">Equalizer</span>
      </div>
      <div className="flex flex-col items-center gap-3">
        <LoaderSignalBars variant="waveform" />
        <span className="text-xs text-muted-foreground">Waveform</span>
      </div>
      <div className="flex flex-col items-center gap-3">
        <LoaderSignalBars variant="heartbeat" />
        <span className="text-xs text-muted-foreground">Heartbeat</span>
      </div>
    </div>
  );
}