Progress

Exibe um indicador do progresso de uma tarefa.

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 progress --yes

O item progress do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/progress_component.rb
app/helpers/ui/progress_helper.rb
vendor/shadwire/shadwire.css

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

Uso

O valor é clampado em 0..max no servidor. Para atualizações ao vivo, re-renderize via Turbo (Streams/Frames) — o componente não tem estado no cliente.

<%= ui_progress(value: 60, aria: { label: "Progresso do envio" }) %>

Ou renderize o componente Ui::ProgressComponent diretamente:

<%= render Ui::ProgressComponent.new(value: 8, max: 12) %>

Exemplos

Padrão

O valor é renderizado no servidor e exposto via aria-valuenow.

<%= ui_progress(value: 60, aria: { label: "Progresso do envio" }, class: "w-64") %>

Valores

Barras em diferentes estágios de conclusão.

<div class="grid w-64 gap-4">
  <%= ui_progress(value: 25, aria: { label: "25% concluído" }) %>
  <%= ui_progress(value: 50, aria: { label: "50% concluído" }) %>
  <%= ui_progress(value: 100, aria: { label: "100% concluído" }) %>
</div>

Máximo e altura customizados

Use max: para escalas próprias e classes para ajustar a altura.

<%= ui_progress(value: 8, max: 12, class: "h-1 w-64", aria: { label: "8 de 12 tarefas" }) %>

Referência da API

ui_progress(**options) encapsula Ui::ProgressComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`value`	Numeric	`0`	Progresso atual; clampado em `0..max` e exposto como `aria-valuenow`.
`max`	Numeric	`100`	Valor máximo da escala (`aria-valuemax`).
`class` / `class_name`	String	`nil`	Classes extras (largura, altura, …).
`**attrs`	Hash	`{}`	Atributos HTML livres; rotule com `aria: { label: }`.