Spinner
A loading spinner indicator with multiple sizes.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
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
Small
Default
Large
Loading...
Pick a variant to see it applied live.
Ring variant
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. |