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"

Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.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