Spinner

Overview

Spinners communicate that an operation is currently in progress. They are commonly used while loading content, submitting forms, fetching data, or processing background tasks. MiniKit builds on the native aria-busy attribute, allowing assistive technologies to understand when an interface is busy while automatically displaying a visual loading indicator.

Basic Usage

Add the aria-busy="true" attribute to display a loading spinner.

<div aria-busy="true"></div>

Remove the aria-busy attribute or set it to false once loading has completed.

Variants

MiniKit provides small, default, and large spinner variants using the data-spinner attribute.

<div class="hstack">
  <div aria-busy="true" data-size="sm"></div>
  <div aria-busy="true"></div>
  <div aria-busy="true" data-size="lg"></div>
</div>

Choose the spinner variant that best matches the surrounding interface and the importance of the loading state.

Overlay Spinner

Display a centered loading indicator over existing content using the overlay modifier.

<div data-card aria-busy="true" data-variant="overlay">
  <h3>Loading Dashboard</h3>
  <p>Please wait while your data is being loaded.</p>
</div>

Overlay spinners dim the underlying content while preventing user interaction until the operation has completed.

Accessibility

Spinners communicate that an operation is currently in progress. They are commonly used while loading content, submitting forms, fetching data, or processing background tasks. MiniKit builds on the native aria-busy attribute, automatically displaying a loading spinner while preserving accessibility and browser semantics.

• Apply aria-busy="true" only while content is loading.
• Remove it immediately after loading completes.
• Provide descriptive text for loading operations that take more than a few seconds.
• Use a progress indicator instead of a spinner whenever completion can be measured.
• Avoid blocking the interface longer than necessary.

API