Spinner

Overview

The Spinner component provides a visual loading indicator to communicate that content or an action is in progress. Use it when fetching data, submitting forms, or during any asynchronous operation where the user should wait.

Usage

Import the component:

import { Spinner } from "@eqtylab/equality";

Basic usage with default properties:

<Spinner />

Variants

Size

The Spinner supports five size variants to fit different contexts, from inline indicators to full-page loading states.

<Spinner size="xs" />
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />

Color

The Spinner supports color variants using either the brand primary color or status options.

<Spinner variant="neutral" />
<Spinner variant="primary" />
<Spinner variant="success" />
<Spinner variant="danger" />
<Spinner variant="warning" />

Props