Spinner

A small loading indicator.

Overview

Spinner is a decorative graphic with a text alternative. Size it with className. Replace the svg inside the component when you want a different icon. The spin stops when the user prefers reduced motion.

Preview

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add spinner

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { useState } from "react";

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export function SaveAction() {
  const [pending, setPending] = useState(false);

  return (
    <Button
      type="button"
      className="gap-2"
      disabled={pending}
      onClick={() => {
        setPending(true);
        window.setTimeout(() => setPending(false), 1200);
      }}
    >
      {pending ? <Spinner label="" /> : null}
      {pending ? "Saving changes" : "Save changes"}
    </Button>
  );
}

Examples

In a button

A pending action keeps its label and shows the spinner while work runs.

Refreshing

Pair the spinner with the work that is in progress.

Refreshing data...

Customization

Swap the default graphic for another icon, here a macOS-style activity indicator whose spokes step around the circle. The label names the work that is in progress.

Refreshing data...

In practice

Saving a short profile form disables the fields and shows a Spinner inside Save changes.

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`label`	string	`"Loading"`	Text for assistive technology. The spinning graphic stays hidden from it.
`className`	string	—	Merged onto the graphic. Use it for size and color.

Accessibility

The graphic is aria-hidden. The label is the accessible name, in a status element.
motion-reduce:animate-none stops the spin when reduced motion is requested.