Spinner

A spinning loading indicator with role="status" and an accessible label.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add spinner --yes

The spinner registry item installs these files:

app/components/ui_component.rb
app/components/ui/spinner_component.rb
app/helpers/ui/spinner_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_spinner %>
<%= ui_button(disabled: true) { ui_spinner(label: nil) + " Saving" } %>

Examples

Default

Standalone (it announces "Loading") and composed inside a button (decorative).

<div class="flex items-center gap-4">
  <%= ui_spinner %>
  <%= ui_button(disabled: true) do %>
    <%= ui_spinner(label: nil) %>
    Saving
  <% end %>
</div>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Spinner`	`label`	`"Loading"`	The name `role="status"` announces. Pass `nil` beside visible text to make the spinner decorative.