Spinner

Um indicador de carregamento giratório com role="status" e rótulo acessível.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI:

shadwire add spinner --yes

O item spinner do registry instala estes arquivos:

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

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

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

Exemplos

Padrão

Standalone (anuncia "Carregando") e composto dentro de um botão (decorativo).

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