Loaders

Voice Wave Loader

An audio-style loader for transcription, generation, and voice agent interfaces.

audiovoiceloader

Installation

Copy and paste the code into your project.

Accessibility notes

The loader uses role status with an audio processing label.

Preview accent

TypeScript

const bars = ["h-5", "h-8", "h-12", "h-7", "h-10", "h-6"];

export function VoiceWaveLoader() {
  return (
    <div className="flex items-center gap-1.5" role="status" aria-label="Audio processing">
      {bars.map((height, index) => (
        <span
          key={`${height}-${index}`}
          className={`${height} w-2 animate-pulse rounded-full bg-[#40E0D0] shadow-[0_0_16px_rgba(64,224,208,0.45)]`}
          style={{ animationDelay: `${index * 90}ms` }}
        />
      ))}
    </div>
  );
}

Usage

<VoiceWaveLoader />

Related components

Loaders

Glow Loader

Beginner

A three-dot animated loader with turquoise, violet, and warm orange glow accents.

loaderanimationstatus

View component

Loaders

Skeleton Card

Beginner

A loading placeholder card for dashboards, streamed summaries, and async previews.

skeletonloadingplaceholder

View component