The Loading component provides multiple animated indicators to communicate that content is being loaded or an operation is in progress. Choose from seven built-in variants.

Installation

shellui add loading

Basic Usage

<Loading />

Variants

Spinner (Default)

A classic rotating spinner:

<Loading Variant="spinner" />

Dots

Three pulsing dots:

<Loading Variant="dots" />

Pulse

A pulsing circle:

<Loading Variant="pulse" />

Ring

An animated ring:

<Loading Variant="ring" />

Bars

Animated vertical bars:

<Loading Variant="bars" />

Grid

A pulsing grid pattern:

<Loading Variant="grid" />

Orbit

An orbiting animation:

<Loading Variant="orbit" />

Sizes

Control the loading indicator size:

<Loading Variant="spinner" Size="sm" />
<Loading Variant="spinner" Size="md" />
<Loading Variant="spinner" Size="lg" />

Full Page Loading

Overlay a loading indicator over the full viewport:

@if (isLoading)
{
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
    <Loading Variant="spinner" Size="lg" />
  </div>
}

Inline Loading

Use loading indicators inline with content:

<Button Disabled="@isSaving">
  @if (isSaving)
  {
    <Loading Variant="spinner" Size="sm" Class="mr-2" />
    <span>Saving...</span>
  }
  else
  {
    <span>Save</span>
  }
</Button>

@code {
    private bool isSaving = false;
}

Skeleton vs Loading

Use Skeleton for content placeholders and Loading for active operations:

@* Content placeholder *@
<Skeleton Class="h-4 w-[200px]" />

@* Active operation *@
<Loading Variant="spinner" Size="sm" />

API Reference

Property	Type	Default	Description
`Variant`	`string`	`"spinner"`	Animation style: `spinner`, `dots`, `pulse`, `ring`, `bars`, `grid`, `orbit`
`Size`	`string`	`"md"`	Indicator size: `sm`, `md`, `lg`
`Class`	`string?`	`null`	Additional CSS classes

Accessibility

The Loading component includes:

role="status" for screen reader announcements
aria-label="Loading" by default
Respects prefers-reduced-motion (falls back to static indicator)
Hidden from screen readers when not visible

Loading

On this page