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 o seu app 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) + " Saving" } %>

Exemplos

Padrão

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

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

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`Spinner`	`label`	`"Loading"`	O nome que o `role="status"` anuncia. Passe `nil` ao lado de um texto visível para deixar o spinner decorativo.