Progress

Feedback

Barra de progresso sobre o primitivo Radix, com estado determinado e indeterminado e dois tamanhos.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Progress } from "@trdr/ui/progress"

Uso

import { Progress } from "@trdr/ui/progress"

export function Exemplo() {
  return <Progress />
}

Variantes

GrupoValoresPadrão
size
defaultlg
default

Props

ProgressPropsestende React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, VariantProps<typeof progressVariants>

Quando usar

Use a barra de progresso quando existe uma medida real de conclusao: upload de arquivo, importacao de dados, instalacao. Quando o percentual e conhecido, passe value e o usuario ve quanto falta. Quando a operacao esta em andamento mas nao ha uma medida (por exemplo esperando resposta do servidor), omita value: a barra entra no estado indeterminado.

Quando nao usar

Nao use progress para uma espera muito curta (menos de um segundo): nesse caso um Spinner comunica melhor. Nao use progress como um input de intervalo, ele e somente leitura, nao existe interacao do usuario sobre a barra.

Anatomia

  • Progress (data-slot="progress"): a raiz, com role="progressbar" herdado do Radix e os atributos aria-valuemin, aria-valuemax e aria-valuenow calculados automaticamente a partir de value e max.
  • Indicador (data-slot="progress-indicator"): o preenchimento, renderizado internamente pelo componente. Em estado determinado, desliza via transform na proporcao de value; em estado indeterminado (data-state="indeterminate"), vira uma barra parcial pulsante.

Tamanhos

  • default (h-1): uso geral, dentro de cartoes e listas.
  • lg (h-2): quando a barra e o elemento principal da tela, por exemplo uma tela cheia de upload.

Acessibilidade

O role="progressbar" e os atributos aria-value* chegam prontos do Radix a partir de value e max; o unico cuidado do consumidor e sempre incluir aria-label (ou aria-labelledby) descrevendo o que esta em progresso, porque a barra sozinha nao diz "progresso de que". A animacao do estado indeterminado respeita motion-reduce: com menos movimento ativo no sistema, o preenchimento fica estatico em vez de pulsar, mas o estado "em andamento" continua exposto por data-state e pelos atributos aria.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="progress"][data-slot="progress-indicator"]
2 tokens usados
bg-primarybg-surface-tertiary