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

Loaders

Voice Wave Loader

Beginner

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

audiovoiceloader

View component

Loaders

Skeleton Card

Beginner

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

skeletonloadingplaceholder

View component

AIPlanningWritingReviewing

Badges

Agent Status Ribbon

Beginner

A compact status ribbon for showing the current phase of an agent workflow.

agentstatusworkflow

View component