Documentation menu

Waveform

A seven-bar wave for listening, speech synthesis, and active processing.

Installation

pnpm dlx shadcn@latest add https://loading.design/r/waveform.json

Usage

import { Waveform } from "@/components/loading/waveform"
<Waveform size={36} speed={1.2} />

API

PropTypeDefaultDescription
sizenumber36Rendered width and height in pixels.
speednumber1.2Duration of one animation cycle, in seconds.
labelstringLoadingAccessible status label. Pass an empty string for decorative use.

Accessibility

The component exposes a polite status through its label. Use an empty label only when nearby text already communicates the loading state, or when the motion is purely decorative.