Spinner

Docs

Spinner

A collection of elegant loading spinners with multiple animation variants.

Overview

A collection of elegant loading spinners for React, based on the CSS animations from SpinKit. This component provides a shadcn-compatible React wrapper around SpinKit's beautiful CSS spinner animations.

Features:

12 different spinner animation variants
Lightweight CSS animations using only transform and opacity
Three size variants (sm, md, lg)
Fully typed with TypeScript
Customizable via CSS variables
Works seamlessly with shadcn/ui design system

Installation

pnpm dlx shadcn@latest add "https://ui.ednesdayw.com/r/spinner.json"

Usage

import { Spinner } from "@/components/ui/spinner"
 
const Page = () => {
  return (
    <Spinner variant="plane" size="md" />
  );
};

Examples

API Reference

Props

Prop	Type	Default	Description
`variant`	`"plane" \| "chase" \| "bounce" \| "wave" \| "pulse" \| "flow" \| "swing" \| "circle" \| "circle-fade" \| "grid" \| "fold" \| "wander"`	`"plane"`	The animation variant to display
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the spinner
`className`	`string`	`undefined`	Additional CSS classes

Size Reference

Size	Dimensions
`sm`	28px
`md`	34px
`lg`	40px

Styling

The spinner uses CSS variables for customization. You can override the default color using the --sk-color variable:

<Spinner
  variant="plane"
  style={{ "--sk-color": "#10b981", "--sk-size": "40px" } as React.CSSProperties}
/>

By default, the spinner inherits the primary color from your theme:

--sk-color: var(--color-primary)

Common Use Cases

Loading Button

import { Button } from "@/components/ui/button"
import { Spinner } from "@/components/ui/spinner"
 
const LoadingButton = ({ isLoading, children, ...props }) => {
  return (
    <Button disabled={isLoading} {...props}>
      {isLoading ? (
        <Spinner variant="pulse" size="sm" />
      ) : (
        children
      )}
    </Button>
  );
};

Full Page Loading

import { Spinner } from "@/components/ui/spinner"
 
const LoadingPage = () => {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <Spinner variant="circle-fade" size="lg" />
    </div>
  );
};

Inline Loading

import { Spinner } from "@/components/ui/spinner"
 
const InlineLoading = () => {
  return (
    <div className="flex items-center gap-2">
      <Spinner variant="flow" size="sm" />
      <span>Loading data...</span>
    </div>
  );
};

Accessibility

All spinner components include proper ARIA attributes for screen readers:

The spinner container has role="status" for live region announcements
An accessible label is provided via aria-label="Loading"

For better accessibility, consider adding descriptive text:

<div className="flex items-center gap-2">
  <Spinner variant="pulse" size="sm" />
  <span className="sr-only">Loading your content</span>
</div>

Credits

This component is a React implementation for shadcn/ui, using the CSS animations from SpinKit by Tobias Ahlin.

Overview

Installation

Usage

Examples

Plane

Chase

Bounce

Wave

Pulse

Flow

Swing

Circle

Circle Fade

Grid

Fold

Wander