Spinner

Something is working, and the wait is short.

Syncing 3 projects…

Fig. 1 A spinner inside a saving button and beside a sync status.

When to use it

Use Spinner for waits of a second or two, inside the button or panel that’s busy. Keep the surrounding layout still.

For text that arrives piece by piece, use Shimmer. For longer waits, show progress or what’s happening.

SpinnerThis page

Working on it.

Syncing 3 projects…

Buttons and panels waiting briefly.

Shimmer

Text on its way.

Generating response…

Reading 4 files…

Indexing the workspace…

Response generated.

Streaming answers and status lines.

Fig. 2 Two ways to show waiting. Pick by what is on its way.

How it behaves

Spinner renders the Loader2Icon from lib/icons with role="status" and an accessible name of Loading. Pass aria-label to describe the work, such as Searching.

Inside a control or beside text that already says what is happening, pass aria-hidden="true" so the status isn't announced twice.

It inherits the current text color and is 16px by default; set a size class to change it. In a Button, mark it data-icon="start" for the icon inset and set aria-busy while pending. Pair disabled with focusableWhenDisabled so the button blocks repeat presses but keeps focus and full strength, reading as working rather than unavailable.

A filled Button may show a spinner only as transient state: resolve it to a result such as Saved, then return to the label. Reduced motion slows the rotation instead of stopping it.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

spinner-example.tsx

The full source is yours to edit once installed:

spinner.tsx

1import { Loader2Icon } from "@/registry/lib/icons"2import { cn } from "@/registry/lib/utils"3import type * as React from "react"4 5// Inherits the surrounding text color and size slot. Reduced motion slows the rotation rather than stopping6// it, because the movement is what shows that work is still in progress.7// shadcn gives the icon itself status semantics; an SVG cannot be an output element.8/* oxlint-disable jsx-a11y/prefer-tag-over-role */9function Spinner({ className, ...props }: React.ComponentProps<"svg">) {10  return (11    <Loader2Icon12      data-slot="spinner"13      role="status"14      aria-label="Loading"15      className={cn("size-4 shrink-0 animate-spin motion-reduce:[animation-duration:2s]", className)}16      {...props}17    />18  )19}20 21export { Spinner }22