Large Spinner for React

Spinner defaults to size-4 (16px). This file passes size-8, which sets the width and height to 32px. Size is that class. There is no size prop.

The icon uses currentColor, so it takes the text color around it. This file adds no color class, so it matches the parent. Add text-primary or text-muted-foreground on the same Spinner to change it.

It renders with role="status" and an aria-label of Loading. Pass your own aria-label, such as "Loading the page", when the wheel is the only thing in view.

The spin is the animate-spin class. Add motion-reduce:animate-none and the icon stays still. The status role and the label stay.

This demo is the wheel on its own, which suits a page or a panel that is still loading. Beside body text, size-4 matches the other icons. In a dense line, size-3 does.

The spinner has no position of its own. Put it in a flex box with items-center and justify-center, and give that box the panel's height, such as min-h-48.