Spinner

Loading indicator for async operations.

Overview

The catnip-spinner component shows an animated loading spinner. Use when content is loading or a process is in progress.

Choose the arc length with arc. Use inverse when the spinner appears on a dark or strong-color surface; it changes the color treatment without changing the arc length.

Live example

Accessibility

• Use aria-busy="true" and aria-label="Loading" on the loading container
• Prefer role="status" with live region for screen readers
• Avoid multiple spinners on the same view