Command Palette

Search for a command to run...

Loaders/Signal Bars Loader

Signal Bars Loader

Audio waveform / frequency spectrum bars that pulse rhythmically as a loading indicator

Open in v0Open in
Loading

Overview

Audio waveform / frequency spectrum bars that pulse rhythmically. Supports equalizer, waveform, and heartbeat animation patterns. CSS-only.

Installation

npx shadcn@latest add @elements/loader-signal-bars

Usage

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

export function Loading() {
  return <LoaderSignalBars variant="equalizer" size="md" />;
}

Props

PropTypeDefaultDescription
barsnumber5Number of bars
variant"equalizer" | "waveform" | "heartbeat""equalizer"Animation pattern
size"sm" | "md" | "lg""md"Size of the bars
classNamestring-Additional CSS classes