Spinner

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

Processing payment...

$100.00

1
import {
2
  Item,
3
  ItemContent,
4
  ItemMedia,
5
  ItemTitle,
6
} from "@/components/ui/pxl/item"
7
import { Spinner } from "@/components/ui/pxl/spinner"
8

9
export default function SpinnerDemo() {
10
  return (
11
    <div className="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
12
      <Item variant="muted">
13
        <ItemMedia>
14
          <Spinner />
15
        </ItemMedia>
16
        <ItemContent>
17
          <ItemTitle className="line-clamp-1">Processing payment...</ItemTitle>
18
        </ItemContent>
19
        <ItemContent className="flex-none justify-end">
20
          <span className="text-sm tabular-nums">$100.00</span>
21
        </ItemContent>
22
      </Item>
23
    </div>
24
  )
25
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/spinner

Copy and paste the following code into your project.

1
import type { ComponentProps } from "react";
2

3
import { cn } from "@/lib/utils";
4

5
function Spinner1({ className, ...props }: ComponentProps<"svg">) {
6
  return (
7
    <svg
8
      data-slot="spinner"
9
      xmlns="http://www.w3.org/2000/svg"
10
      fill="currentColor"
11
      viewBox="0 0 24 24"
12
      role="status"
13
      aria-label="Loading"
14
      className={cn("size-4 animate-spin duration-2000", className)}
15
      {...props}
16
    >
17
      <path d="M4 12H2L2 6H4V12ZM6 6H4V4H6V6ZM12 4L6 4V2L12 2V4Z" />
18
    </svg>
19
  );
20
}
21

22
function Spinner2({ className, ...props }: ComponentProps<"svg">) {
23
  return (
24
    <svg
25
      data-slot="spinner"
26
      xmlns="http://www.w3.org/2000/svg"
27
      fill="currentColor"
28
      viewBox="0 0 24 24"
29
      role="status"
30
      aria-label="Loading"
31
      className={cn("size-4 animate-spin duration-2000", className)}
32
      {...props}
33
    >
34
      <path d="M14 23H10V19H14V23ZM7 21H3L3 17H7V21ZM21 20H18V17H21V20ZM6 9V14H1L1 9H6ZM23 13H20V10H23V13ZM3 11V12H4V11H3ZM13 7H7L7 1L13 1V7ZM20 6H18V4L20 4V6ZM9 5H11V3H9V5Z"></path>
35
    </svg>
36
  );
37
}
38

39
function Spinner3({ className, ...props }: ComponentProps<"svg">) {
40
  return (
41
    <svg
42
      data-slot="spinner"
43
      xmlns="http://www.w3.org/2000/svg"
44
      fill="currentColor"
45
      viewBox="0 0 24 24"
46
      role="status"
47
      aria-label="Loading"
48
      className={cn("size-4 animate-spin duration-2000", className)}
49
      {...props}
50
    >
51
      <path d="M13 22H11V15H13V22ZM5 21H3V19H5V21ZM21 19V21H19V19H21ZM7 19H5V17H7V19ZM19 19H17V17H19V19ZM9 17H7V15H9V17ZM17 17H15V15H17V17ZM9 13H2V11H9V13ZM22 13H15V11H22V13ZM9 9H7V7H9V9ZM13 9H11V2H13V9ZM17 9H15V7H17V9ZM7 7H5V5H7V7ZM19 7H17V5H19V7ZM5 5H3V3H5V5ZM21 5H19V3H21V5Z" />
52
    </svg>
53
  );
54
}
55

56
Spinner2.Spinner1 = Spinner1;
57
Spinner2.Spinner2 = Spinner2;
58
Spinner2.Spinner3 = Spinner3;
59

60
export { Spinner2 as Spinner };

Update the import paths to match your project setup.

Usage

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

<Spinner />

Size

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

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.

Badge

Add a spinner to a badge 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.