Spinner

An indicator that can be used to show a loading state.

Installation


pnpm dlx shadcn@latest add @coss/spinner

Usage

import { Spinner } from "@/components/ui/spinner"

<Spinner />

Examples

Input Group

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Spinner } from "@/components/ui/spinner";

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput disabled placeholder="Processing…" type="search" />
      <InputGroupAddon>
        <Spinner />
      </InputGroupAddon>
    </InputGroup>
  );
}

Button

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

export default function Particle() {
  return (
    <Button disabled>
      <Spinner />
      Loading...
    </Button>
  );
}

API Reference

Spinner

Use the Spinner component to display a loading indicator.

Prop	Type	Default
`className`	`string`

<Spinner />

Slider Switch

On This Page

Installation Usage Examples Input Group Button API Reference Spinner