Triple dot spinner

TripleDotSpinner rotates three compact markers around their shared center. It has more motion than a static dot row, but it stays small enough for buttons, badges, table rows, and local refresh states.

import { TripleDotSpinner } from "@/components/loading-ui/triple-dot-spinner";

export function TripleDotSpinnerDemo() {

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @loading-ui/triple-dot-spinner
Copy

Usage

Copyimport { TripleDotSpinner } from "@/components/loading-ui/triple-dot-spinner";

Copy<span className="grid size-5 place-items-center">
  <TripleDotSpinner className="size-1.5" />
</span>

Customization

The size-* utility controls the dot size, not the whole visual footprint. The three-dot shape rotates outside that box, so reserve a small fixed slot in buttons, badges, and table cells.

Size

Wrap the spinner in a stable slot, then scale the dots with size-*.

import { TripleDotSpinner } from "@/components/loading-ui/triple-dot-spinner";

export function TripleDotSpinnerSize() {

Color

All three markers use currentColor, so the spinner can inherit text color or use a direct foreground utility.

import { TripleDotSpinner } from "@/components/loading-ui/triple-dot-spinner";

export function TripleDotSpinnerColor() {

Duration

Set --duration to make the rotation snappier or calmer.

import { TripleDotSpinner } from "@/components/loading-ui/triple-dot-spinner";

export function TripleDotSpinnerDuration() {

Examples

These examples favor dense surfaces: save buttons, status chips, and compact alerts where the spinner needs to stay small.

Button

A size-5 icon slot keeps the rotating dots centered without shifting the button label.

import { Button } from "@/components/ui/button";
import { TripleDotSpinner } from "@/components/loading-ui/triple-dot-spinner";

Badge

Use the smallest dot size inside chips so the rotating shape does not crowd the label.

import { Badge } from "@/components/ui/badge";
import { TripleDotSpinner } from "@/components/loading-ui/triple-dot-spinner";

Alert

Alerts give compact refresh feedback a little more context without blocking the page.

import { Button } from "@/components/ui/button";
import {
  Alert,