Spinner

---
import { Item, ItemContent, ItemMedia, ItemTitle } from "@/components/ui/item"
import { Spinner } from "@/components/ui/spinner"
---

<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
  <Item variant="muted">
    <ItemMedia>
      <Spinner />
    </ItemMedia>
    <ItemContent>
      <ItemTitle class="line-clamp-1">Processing payment...</ItemTitle>
    </ItemContent>
    <ItemContent class="flex-none justify-end">
      <span class="text-sm tabular-nums">$100.00</span>
    </ItemContent>
  </Item>
</div>

Installation

npx shadcn@latest add @fulldev/spinner

Usage

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

<Spinner />

Spinner renders the Lucide loader-circle icon with role="status" and aria-label="Loading". Next to visible loading text, the text can carry the main status message.

Customization

Replace the default icon by editing spinner.astro.

---
import type { HTMLAttributes } from "astro/types"
import LoaderIcon from "@lucide/astro/icons/loader"

import { cn } from "@/lib/utils"

type Props = HTMLAttributes<"svg">

const { class: className, ...props } = Astro.props
---

<LoaderIcon
  data-slot="spinner"
  role="status"
  aria-label="Loading"
  class={cn("size-4 animate-spin", className)}
  {...props}
/>

Size

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

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

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

Button

Place the Spinner before the label with data-icon="inline-start", or after it with data-icon="inline-end".

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

<div class="flex flex-col items-center gap-4">
  <Button disabled size="sm">
    <Spinner data-icon="inline-start" />
    Loading...
  </Button>
  <Button variant="outline" disabled size="sm">
    <Spinner data-icon="inline-start" />
    Please wait
  </Button>
  <Button variant="secondary" disabled size="sm">
    <Spinner data-icon="inline-start" />
    Processing
  </Button>
</div>

Badge

Place the Spinner before the label with data-icon="inline-start", or after it with data-icon="inline-end".

---
import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"
---

<div class="flex items-center gap-4 [--radius:1.2rem]">
  <Badge>
    <Spinner data-icon="inline-start" />
    Syncing
  </Badge>
  <Badge variant="secondary">
    <Spinner data-icon="inline-start" />
    Updating
  </Badge>
  <Badge variant="outline">
    <Spinner data-icon="inline-start" />
    Processing
  </Badge>
</div>

Input Group

---
import ArrowUpIcon from "@lucide/astro/icons/arrow-up"

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

<div class="flex w-full max-w-md flex-col gap-4">
  <InputGroup>
    <InputGroupInput placeholder="Send a message..." disabled />
    <InputGroupAddon align="inline-end">
      <Spinner />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupTextarea placeholder="Send a message..." disabled />
    <InputGroupAddon align="block-end">
      <Spinner /> Validating...
      <InputGroupButton class="ml-auto" variant="default">
        <ArrowUpIcon />
        <span class="sr-only">Send</span>
      </InputGroupButton>
    </InputGroupAddon>
  </InputGroup>
</div>

Empty

---
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
import { Spinner } from "@/components/ui/spinner"
---

<Empty class="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

Set dir="rtl" on a parent element.

---
import { Item, ItemContent, ItemMedia, ItemTitle } from "@/components/ui/item"
import { Spinner } from "@/components/ui/spinner"

const translations = {
  en: {
    dir: "ltr",
    values: {
      title: "Processing payment...",
      amount: "$100.00",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      title: "جاري معالجة الدفع...",
      amount: "١٠٠.٠٠ دولار",
    },
  },
  he: {
    dir: "rtl",
    values: {
      title: "מעבד תשלום...",
      amount: "$100.00",
    },
  },
} as const

const { dir, values: t } = translations.ar
---

<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]" dir={dir}>
  <Item variant="muted" dir={dir}>
    <ItemMedia>
      <Spinner />
    </ItemMedia>
    <ItemContent>
      <ItemTitle class="line-clamp-1">{t.title}</ItemTitle>
    </ItemContent>
    <ItemContent class="flex-none justify-end">
      <span class="text-sm tabular-nums">{t.amount}</span>
    </ItemContent>
  </Item>
</div>

API Reference

Source: src/components/ui/spinner

Spinner accepts all SVG attributes plus the Lucide icon props color, size, stroke-width and absoluteStrokeWidth.

Sidebar

Search