Loaders

Glow Loader

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

loaderanimationstatus

Installation

Copy and paste the code into your project.

Accessibility notes

The preview uses role status and an aria-label so loading state is announced.

Preview accent

TypeScript

export function GlowLoader() {
  return (
    <div className="flex items-center gap-3" role="status" aria-label="Loading">
      <span className="h-4 w-4 animate-ping rounded-full bg-[#40E0D0]" />
      <span className="h-4 w-4 animate-ping rounded-full bg-[#a78bfa] [animation-delay:120ms]" />
      <span className="h-4 w-4 animate-ping rounded-full bg-[#fb923c] [animation-delay:240ms]" />
    </div>
  );
}

Usage

<GlowLoader />

Related components

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

Loaders

Voice Wave Loader

Beginner

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

audiovoiceloader

View component

Build passed

Preview deployed

Docs synced

Effects

Status Toast Stack

Beginner

A stacked notification pattern for build, deploy, and sync events.

toaststatusfeedback

View component