# Spinner

Source: https://lumeo.nativ.sh/components/spinner

# Spinner

A loading spinner indicator with multiple sizes.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<Spinner />

## When to Use

-   Loading indicators while data is being fetched
-   Button loading state during form submission or async operations
-   Inline loading feedback for sections of a page that update independently
-   Any short-duration wait where a full skeleton layout is unnecessary

Preview Code

Sizes

Small

Default

Large

Preview Code

With Text

Loading...

Preview Code

In a Button

Please wait

Preview Code

Variant — interactive

Pick a variant to see it applied live.

RingDotsBars

Ring variant

Preview Code

All Variants

Ring

Dots

Bars

## Parameter Coverage

Every Size and SpinnerVariant value rendered live.

### Size

Xs

Sm

Md

Lg

Xl

Xxl

Xxs

### SpinnerVariant

Ring

Dots

Bars

## API Reference

### Spinner

Prop

Type

Default

Description

Size

SpinnerSize

Default

Size of the spinner. Values: Sm (16px), Default (24px), Lg (32px).

Variant

SpinnerVariant

Circle

Shape of the spinner. Values: Circle, Dots, Bars.

Color

string?

null

Override color (CSS color or Tailwind token).

Label

string?

null

Accessible label announced to screen readers.

Class

string?

null

Additional CSS classes.

AdditionalAttributes

Dictionary<string, object>?

null

Additional HTML attributes.

## Related Components

-   [Progress](/components/progress) — Determinate progress bar when the completion percentage is known
-   [Skeleton](/components/skeleton) — Placeholder layout shimmer for content-heavy loading states
-   [Button](/components/button) — Embed a Spinner inside a disabled button for submit loading state