Blode UI
GitHub

Spinner

PreviousNext

A loading indicator that displays a spinning animation.

Loading
Loading...
import { Item, ItemContent, ItemMedia, ItemTitle } from "@/components/ui/item";
import { Spinner } from "@/components/ui/spinner";
 
export const SpinnerDemo = () => (
  <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
    <Item variant="muted">
      <ItemMedia>
        <Spinner />
      </ItemMedia>
      <ItemContent>
        <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
      </ItemContent>
      <ItemContent className="flex-none justify-end">
        <span className="text-sm tabular-nums">$100.00</span>
      </ItemContent>
    </Item>
  </div>
);

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/spinner"

Usage

import { Spinner } from "@/components/ui/spinner";
<Spinner />

Examples

Default

Loading
Loading...
import { Item, ItemContent, ItemMedia, ItemTitle } from "@/components/ui/item";
import { Spinner } from "@/components/ui/spinner";
 
export const SpinnerDemo = () => (
  <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
    <Item variant="muted">
      <ItemMedia>
        <Spinner />
      </ItemMedia>
      <ItemContent>
        <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
      </ItemContent>
      <ItemContent className="flex-none justify-end">
        <span className="text-sm tabular-nums">$100.00</span>
      </ItemContent>
    </Item>
  </div>
);
<Spinner />

Custom Size

Loading
Loading...
import { Spinner } from "@/components/ui/spinner";
 
export const SpinnerSize = () => (
  <div className="flex items-center gap-6">
    <Spinner size={12} />
    <Spinner size={16} />
    <Spinner size={24} />
    <Spinner size={32} />
  </div>
);
<Spinner size={24} />

Props

PropTypeDefaultDescription
sizenumber48The size of the spinner in pixels.
strokeWidthnumber2The width of the spinner stroke.