BaseProgress

Mostra quanto de um trabalho já foi feito: saldo do empenho usado, etapas da medição, envio de arquivos.

Envio das fotos da medição40%

4 de 10 fotos enviadas

Saldo do empenho 2026NE00041286%

Perto do limite: confira antes de lançar nova medição

Saldo do empenho 2026NE000412: Atenção. Perto do limite: confira antes de lançar nova medição

Importação do cronograma100%

Cronograma importado

Importação do cronograma: Concluído

Uso

• Use para trabalho com fim conhecido. O rótulo diz o que está sendo medido, não "Carregando".
• A ajuda conta o que o número quer dizer: "4 de 10 fotos enviadas", "Atualizado às 14h".
• Quando o percentual sozinho engana, compare com o previsto na ajuda: 71% concluído com 90% do prazo gasto está atrasado.
• Para trabalho de duração desconhecida, use indeterminate. Se a espera passar de alguns segundos, diga na ajuda o que está acontecendo.
• Para listas de passos com nome, use um indicador de etapas, não uma barra.

Situações

Envio das fotos da medição50%

Importação do cronograma100%

Importação do cronograma: Concluído

Saldo do empenho86%

Saldo perto do limite

Saldo do empenho: Atenção. Saldo perto do limite

Envio do relatório20%

O envio parou. Tente de novo.

Envio do relatório: Erro. O envio parou. Tente de novo.

Situação	Quando
default	Trabalho em andamento, sem problema
success	Terminou bem
warning	Segue, mas merece atenção, como um saldo perto do limite
error	Parou ou falhou. A ajuda diz o que fazer

A cor nunca vem sozinha: cada situação tem ícone, e o leitor de tela ouve o nome da barra com a situação. Em warning e error, ouve também a ajuda, como "Envio do relatório: Erro. O envio parou. Tente de novo."

O anúncio só acontece quando status muda numa barra que já está na tela. Troque a situação da mesma instância; não recrie o componente (por exemplo, mudando a key), porque a maioria dos leitores de tela não anuncia uma região que já nasce preenchida.

Indeterminado

Gerando relatório da obra

Pode levar até um minuto

Envio dos anexosProcessando 3 arquivos

Envio dos anexos

O envio parou. Tente de novo.

Envio dos anexos: Erro. O envio parou. Tente de novo.

Importação do cronograma

Importação do cronograma: Concluído

Sem número, o value-text ainda pode dizer o que está acontecendo. Com status="success" ou status="error", a barra para de se mover e preenche o trilho, porque a espera acabou.

Tamanhos

Médio · 6 px60%

Pequeno · 4 px60%

Texto do valor

Etapas da medição3 de 5 etapas

Estilo

Propriedade	Token
Trilho	--tj-layer-accent-01
Barra	--tj-border-interactive; situações --tj-support-success-text, --tj-support-warning-text, --tj-support-error-text. Contraste contra o trilho, calculado a partir dos tokens nos dois temas (WCAG 1.4.11): --tj-border-interactive 4,27:1 no claro e 3,16:1 no escuro; tokens -text de situação 4,76:1 ou mais
Valor nas situações; ajuda em warning e error	--tj-support-*-text
Ajuda	--tj-text-helper, --tj-text-xs
Raio	--tj-radius-pill
Altura	6 px (md), 4 px (sm)
Movimento	--tj-duration-moderate-02 e --tj-easing-standard ao mudar o valor
Indeterminado	Segmento de 40% que atravessa o trilho em --tj-duration-slow-01 × 3,5 com --tj-easing-standard; em success e error, barra parada e cheia. Com movimento reduzido, listras paradas na cor da barra
Alto contraste	Trilho com borda CanvasText e barra em Highlight

Código

<BaseProgress label="Saldo do empenho usado" :value="86" status="warning" helper-text="Perto do limite" />
<BaseProgress label="Gerando relatório" indeterminate />

Propriedade	Tipo	Padrão	Descrição
label	string	—	Nome da barra; obrigatório
value	number	0	Percentual de 0 a 100; valores fora do intervalo são ajustados
helperText	string	—	Explica o número; ligado à barra por aria-describedby
status	'default' | 'success' | 'warning' | 'error'	'default'	Situação do trabalho
size	'sm' | 'md'	'md'	Altura da barra
indeterminate	boolean	false	Duração desconhecida; a barra anima e não anuncia valor
hideLabel	boolean	false	Esconde o rótulo na tela e mantém para leitores de tela
valueText	string	—	Troca o "86%" mostrado e anunciado, como "3 de 5 etapas"; no indeterminado, diz o que está acontecendo
id	string	gerado	Id do elemento role="progressbar". O rótulo recebe {id}-label, para uma região que está carregando apontar aria-describedby para ele

Sem eventos.

Acessibilidade

• Segue o padrão progressbar do WAI-ARIA APG: role="progressbar" com aria-valuenow, aria-valuemin="0", aria-valuemax="100" e aria-valuetext.
• O rótulo nomeia a barra por aria-labelledby. Com hide-label, ele some da tela e continua para o leitor de tela.
• O percentual visível fica escondido dos leitores de tela, que já ouvem o valor pela barra. O percentual arredonda para baixo: 99,6% aparece como 99%, e 100% só quando o trabalho termina.
• No modo indeterminado, a barra não tem aria-valuenow, como pede o APG. O value-text, quando existe, continua em aria-valuetext.
• A situação é anunciada numa região aria-live="polite" com o nome da barra, como "Envio do relatório: Erro": com várias barras na tela, o leitor de tela diz qual mudou, sem tirar o foco. Em warning e error, a ajuda entra no anúncio, para a pessoa saber o que fazer. A descrição da barra traz só a situação, sem repetir o nome.
• Enquanto uma região carrega, marque-a com aria-busy="true" e deixe a barra fora dela, ao lado. Dentro de uma região ocupada, o leitor de tela pode segurar os anúncios da barra até a espera acabar. Com id, o rótulo recebe {id}-label; aponte o aria-describedby da região para ele, que tem texto:

<BaseProgress id="anexos-progresso" label="Envio dos anexos" indeterminate />
<section aria-busy="true" aria-describedby="anexos-progresso-label">
  <!-- anexos -->
</section>

• A barra não recebe foco, porque não é interativa.
• Com movimento reduzido no sistema, a barra não anima: o indeterminado vira listras paradas.
• No alto contraste do Windows, o trilho ganha borda e a barra usa a cor de destaque do sistema.
• Testado com axe em todas as situações, nos dois tamanhos, com e sem rótulo visível, no modo indeterminado com situação, ajuda e value-text, e depois de uma troca de situação. O contraste foi calculado a partir dos tokens nos dois temas (veja Estilo), porque o jsdom não calcula cores.