RetroSpinner

Loading spinners in watch cursor and beach ball variants inspired by Mac OS 9.

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-spinner.json"

Import

import { RetroSpinner } from "@/components/ui/retro-spinner"

Two loading spinner variants inspired by Mac OS 9: the watch cursor (with a rotating second hand) and the beach ball (spinning pinwheel).

Watch Cursor (RetroSpinner)

sm (16px)

default (24px)

lg (32px)

Beach Ball (RetroBeachBall)

sm (16px)

default (24px)

lg (32px)

Side by Side

Watch

Beach Ball

The watch cursor uses a stepped rotation animation (12 steps per revolution). The beach ball uses a smooth continuous spin. Both include screen-reader-only "Loading..." text.

View source Back to overview