Loading

New

Overview

An animated spinner with configurable speed, size, color, and accessible standalone labels.

HEEx

<div class="flex items-center justify-center text-foreground">
  <Loading.loading size={:lg} />
</div>

Sizes

Choose a size from extra small through extra large.

HEEx

<div class="flex items-center justify-center gap-7 text-foreground">
  <Loading.loading size={:xs} />
  <Loading.loading size={:md} />
  <Loading.loading size={:lg} />
  <Loading.loading size={:xl} />
</div>

Colors

The indicator uses currentColor, so text color utilities set its color.

HEEx

<div class="flex items-center justify-center gap-7">
  <Loading.loading size={:sm} class="text-foreground" />
  <Loading.loading size={:sm} class="text-blue-600 dark:text-blue-400" />
  <Loading.loading size={:sm} class="text-success" />
  <Loading.loading size={:sm} class="text-warning" />
</div>

Accessible status

Keep the indicator decorative beside descriptive text. Add label when it is the only loading status on screen.

Syncing recent activity

HEEx

<div class="flex flex-col items-start gap-4 text-sm text-muted-foreground">
  <div class="flex items-center gap-2">
    <Loading.loading size={:sm} />
    <span>Syncing recent activity</span>
  </div>
  <Loading.loading label="Loading results" size={:lg} class="text-foreground" />
</div>

Add this module

terminal

mix dizzy.add loading

Component API

Loading.loading

Attributes

Attributes for Loading.loading
Name	Type	Default	Values
`class`	`:any`	nil	—
`label`	`:string`	nil	—
`rest`	`:global`	nil	—
`size`	`:atom`	:md	:xs, :sm, :md, :lg, :xl
`speed`	`:atom`	:normal	:slow, :normal, :fast