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 o seu app 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 servidor mantém o valor entre 0 e max. O componente não guarda estado no navegador, então, para atualizar ao vivo, renderize de novo com Turbo Streams ou Frames.

<%= ui_progress(value: 60, aria: { label: "Upload progress" }) %>

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: "Upload progress" }, 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% complete" }) %>
  <%= ui_progress(value: 50, aria: { label: "50% complete" }) %>
  <%= ui_progress(value: 100, aria: { label: "100% complete" }) %>
</div>

Máximo e altura personalizados

Use max: para outra escala e classes para ajustar a altura.

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

Referência da API

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

Argumento	Tipo	Padrão	Descrição
`value`	Numeric	`0`	O progresso atual, limitado a `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: }`.