Spinner

Shows a loading indicator for a task with no known end time.

spinner-basic-demo.tsx

import { Spinner } from "@/components/vip-ui/spinner";export function SpinnerBasicDemo() {  return <Spinner aria-label="Loading workspace" />;}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-spinner.json

Variants

Each variant animates only transform and opacity, so it stays smooth when the page is busy. With reduced motion, it stops.

Ring
Segments
Dots

spinner-demo.tsx

import { Spinner } from "@/components/vip-ui/spinner";const variants = [  { variant: "ring", name: "Ring" },  { variant: "segments", name: "Segments" },  { variant: "dots", name: "Dots" },] as const;export function SpinnerDemo() {  return (    <ul className="grid w-full max-w-lg grid-cols-3 divide-x divide-border/70 rounded-xl bg-card shadow-[var(--shadow-card)] ring-1 ring-border/70">      {variants.map(({ variant, name }) => (        <li          key={variant}          className="flex flex-col items-center gap-4 px-3 pt-8 pb-5"        >          <Spinner variant={variant} size="lg" aria-label={`${name} spinner`} />          <span className="text-xs font-medium text-muted-foreground">            {name}          </span>        </li>      ))}    </ul>  );}

Sizes

xs · 14px

sm · 16px

md · 24px

lg · 40px

xl · 56px

spinner-sizes-demo.tsx

import { Spinner } from "@/components/vip-ui/spinner";const sizes = [  { size: "xs", px: 14 },  { size: "sm", px: 16 },  { size: "md", px: 24 },  { size: "lg", px: 40 },  { size: "xl", px: 56 },] as const;export function SpinnerSizesDemo() {  return (    <div className="flex flex-wrap items-end justify-center gap-x-8 gap-y-6">      {sizes.map(({ size, px }) => (        <div key={size} className="flex flex-col items-center gap-3">          <Spinner size={size} aria-label={`Loading, ${size}`} />          <span className="font-mono text-xs text-muted-foreground tabular-nums">            {size} · {px}px          </span>        </div>      ))}    </div>  );}

Color

The spinner uses the current text color.

spinner-color-demo.tsx

import { Spinner } from "@/components/vip-ui/spinner";export function SpinnerColorDemo() {  return (    <div className="flex flex-wrap items-center justify-center gap-3">      <span className="grid size-16 place-items-center rounded-xl bg-card text-foreground shadow-[var(--shadow-card)] ring-1 ring-border/70">        <Spinner aria-label="Loading" />      </span>      <span className="grid size-16 place-items-center rounded-xl bg-card text-muted-foreground shadow-[var(--shadow-card)] ring-1 ring-border/70">        <Spinner variant="segments" aria-label="Loading" />      </span>      <span className="grid size-16 place-items-center rounded-xl bg-primary text-primary-foreground shadow-[var(--shadow-card)]">        <Spinner aria-label="Loading" />      </span>      <span className="grid size-16 place-items-center rounded-xl bg-success/10 text-success ring-1 ring-success/25">        <Spinner variant="dots" aria-label="Loading" />      </span>    </div>  );}

In a button

Set decorative when text next to the spinner names the wait. isPending keeps focus on the button and ignores presses. Also install Button.

spinner-usage-demo.tsx

"use client";import { FloppyDiskIcon } from "@phosphor-icons/react";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Spinner } from "@/components/vip-ui/spinner";export function SpinnerUsageDemo() {  const [isSaving, setIsSaving] = useState(false);  const [saved, setSaved] = useState(false);  return (    <div className="flex flex-col items-center gap-3">      <Button        isPending={isSaving}        onPress={() => {          setIsSaving(true);          setSaved(false);          setTimeout(() => {            setIsSaving(false);            setSaved(true);          }, 1600);        }}      >        {isSaving ? (          <Spinner size="sm" decorative />        ) : (          <FloppyDiskIcon aria-hidden="true" />        )}        {isSaving ? "Saving" : "Save changes"}      </Button>      <output aria-live="polite" className="h-5 text-sm text-muted-foreground">        {saved ? "Changes saved." : ""}      </output>    </div>  );}

Loading overlay

Set aria-busy on the region while it loads, and keep the old content in place. Also install Button.

Visitors: 12,480
Sign-ups: 342
Conversion: 2.7%

spinner-overlay-demo.tsx

"use client";import { ArrowClockwiseIcon } from "@phosphor-icons/react";import { useState } from "react";import { Button } from "@/components/vip-ui/button";import { Spinner } from "@/components/vip-ui/spinner";const metrics = [  { label: "Visitors", value: "12,480" },  { label: "Sign-ups", value: "342" },  { label: "Conversion", value: "2.7%" },];export function SpinnerOverlayDemo() {  const [isLoading, setIsLoading] = useState(false);  return (    <div className="grid w-full max-w-md gap-3">      <section        aria-label="Weekly traffic"        aria-busy={isLoading}        className="relative overflow-hidden rounded-xl bg-card shadow-[var(--shadow-card)] ring-1 ring-border/70"      >        <dl          className={`grid grid-cols-3 divide-x divide-border/70 transition-[opacity,filter] duration-300 ease-out-quint ${isLoading ? "opacity-40 blur-[1px]" : ""}`}        >          {metrics.map((metric) => (            <div key={metric.label} className="px-4 py-5">              <dt className="text-xs text-muted-foreground">{metric.label}</dt>              <dd className="mt-1 text-xl font-semibold tracking-tight tabular-nums">                {metric.value}              </dd>            </div>          ))}        </dl>        {isLoading && (          <div className="absolute inset-0 grid place-items-center transition-opacity duration-200 ease-out-quint starting:opacity-0">            <span className="flex items-center gap-2 rounded-full bg-card px-3 py-1.5 text-sm font-medium shadow-[var(--shadow-card)] ring-1 ring-border/70">              <Spinner size="sm" decorative />              Refreshing            </span>          </div>        )}      </section>      <Button        variant="outline"        size="sm"        className="justify-self-end"        isPending={isLoading}        onPress={() => {          setIsLoading(true);          setTimeout(() => setIsLoading(false), 1800);        }}      >        <ArrowClockwiseIcon aria-hidden="true" />        Refresh      </Button>    </div>  );}

API reference

variant: "ring" | "dots" | "segments" = "ring": Sets the animation style.
size: "xs" | "sm" | "md" | "lg" | "xl" = "md": Sets the size: 14, 16, 24, 40, or 56 pixels.
decorative: boolean = false: Hides the spinner from screen readers. Use it when text next to the spinner names the wait.
aria-label: string = "Loading": Names the wait for screen readers.