MoonUI

Spinner

Free

A standalone spinning loading indicator for asynchronous operations. Ships with two visual styles (ring and dots), four sizes, currentColor-based theming, and an accessible status role with reduced-motion support.

Installation

Install via CLI

npx @moontra/moonui-cli add spinner

Usage

Loading

Examples

Sizes

Four preset sizes — sm (16px), md (24px), lg (32px), and xl (40px).

Loading
Loading
Loading
Loading

Variants

The default variant renders a spinning ring; the dots variant renders three bouncing dots for a softer feel.

Loading
Loading

Colors

The spinner inherits its color from currentColor, so any text-color utility recolors it — no hardcoded colors involved.

Loading
Loading
Loading
Loading

Loading Button

Place a small spinner inside a disabled button to indicate an in-flight action. The spinner picks up the button's text color automatically.