Spinner

A loading indicator that shows an indeterminate operation is in progress.

Default

Sizes

Use the size prop to change the spinner size.

Sizes

Small

Default

Large

Extra Large

With Text

Use the :text slot to add visible loading text next to the spinner.

With Text

Please wait

Saving changes

In Button

Use spinner_icon/1 for inline spinner icons, such as in buttons.

In Button

Click the first button to see the loading state.

    <.button disabled={@loading} phx-click="toggle_loading">
  <%= if @loading do %>
    <.spinner_icon class="mr-2" /> Saving...
  <% else %>
    Save Changes
  <% end %>
</.button>
  

Custom Accessibility Label

Use the label prop to customize the screen reader text.

Custom Label

Centered Loading

A common pattern for full-page or container loading states.

Centered

Loading content...