Spinner

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

Processing payment...$100.00

<div className="flex w-full max-w-xs items-center gap-3 rounded-xl bg-muted p-3">
  <Spinner />
  <span className="min-w-0 flex-1 truncate text-sm font-medium">
    Processing payment...
  </span>
  <span className="text-sm tabular-nums text-muted-foreground">$100.00</span>
</div>

Installation

pnpm dlx cubix@latest add spinner --base aria

Usage

Import

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

Example

<Spinner />

Customization

You can replace the default spinner icon with any other icon by editing the Spinner component.

import { cn } from "@/lib/utils"
import { LoaderIcon } from "lucide-react"

function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
  return (
    <LoaderIcon
      role="status"
      aria-label="Loading"
      className={cn("size-4 animate-spin", className)}
      {...props}
    />
  )
}

Size

Use the size-* utility class to change the size of the spinner.

<div className="flex items-center gap-6">
  <Spinner className="size-3" />
  <Spinner className="size-4" />
  <Spinner className="size-6" />
  <Spinner className="size-8" />
</div>

Button

Add a spinner to a button to indicate a loading state. Place the <Spinner /> before the label with data-icon="inline-start" for a start position, or after the label with data-icon="inline-end" for an end position.

<Button disabled size="sm">
  <Spinner data-icon="inline-start" />
  Loading...
</Button>

Badge

Add a spinner to a badge to indicate a loading state.

SyncingUpdatingProcessing

<Badge>
  <Spinner data-icon="inline-start" />
  Syncing
</Badge>

Input Group

Validating...

<InputGroup>
  <InputGroupInput placeholder="Send a message..." disabled />
  <InputGroupAddon align="inline-end">
    <Spinner />
  </InputGroupAddon>
</InputGroup>

Empty

Processing your request

Please wait while we process your request. Do not refresh the page.

<Empty className="w-full">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <Spinner />
    </EmptyMedia>
    <EmptyTitle>Processing your request</EmptyTitle>
    <EmptyDescription>
      Please wait while we process your request. Do not refresh the page.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <Button variant="outline" size="sm">
      Cancel
    </Button>
  </EmptyContent>
</Empty>

RTL

Wrap content in a container with dir="rtl" to mirror direction.

Processing payment...$100.00

<div dir="rtl" className="flex w-full max-w-xs items-center gap-3 rounded-xl bg-muted p-3">
  <Spinner />
  <span className="min-w-0 flex-1 truncate text-sm font-medium">
    Processing payment...
  </span>
  <span className="text-sm tabular-nums text-muted-foreground">$100.00</span>
</div>

API Reference

Spinner

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes. Use size-* utilities to change the spinner size.
aria-label	string	"Loading"	Accessible name announced by assistive technology.