Componentes
Progress
Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.
Exemplos#
Lendo o contrato
O agente está cruzando os CNPJs
Degradê da marca · coruja quando não há número
Importando lotes
Etapas de um lote
Mesa
Planilha aplicada
Celular · 390
Planilha aplicada
Concluído apaga a ponta
Importar#
import { Progress } from "@hiboupay/react";
import type { ProgressProps, ProgressTone } from "@hiboupay/react";Quando usar#
Use quando
- Upload, importação, job do agente com progresso conhecido.
- Espera longa sem número: indeterminate + label.
Não use quando
- Ação curta: Button loading / Spinner.
- Proporção numa métrica: Bar do MetricWidget.
- Lista carregando: Skeleton.
Variantes#
linear
Uma trilha. O padrão.
com etapas
N trilhos com gap 4, para importação em lotes. O valor 0–100 preenche em ordem.
Anatomia#
- 01Label + coruja (indeterminate)
- 02% em hb-num (determinado)
- 03Trilha 6px wash, ou n trilhos quando há etapas
- 04Preenchimento em degradê da marca
- 05Ponta Vivid Blue, apagada quando concluído
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| value | number | 0 | 0–100. Ignorado se indeterminate. |
| indeterminate | boolean | false | Sem número. A coruja entra em working. |
| label | ReactNode | O que está acontecendo. | |
| segments | number | Quantidade de trilhos. Ausente = um. | |
| tone | "primary" | "success" | "primary" | success só pinta a barra concluída (100%). Antes disso segue o degradê. |
Acessibilidade#
Teclado
Leitor de tela
- —role=progressbar. indeterminate liga aria-busy e omite aria-valuenow.
- —Coruja com title "Agente trabalhando".
Boas práticas#
Faça
- Label concreto: "Lendo 1.204 linhas".
Evite
- Progresso circular. Isso é Spinner.
- Animação se a pessoa pediu reduced-motion no app (respeite).
Conteúdo#
- —Verbo no gerúndio: "Lendo", "Enviando", "Aplicando".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Estado
Spinner
Arco curto em currentColor, para dentro de um botão ou ao lado de um texto.
Entrada
FileUpload
Zona rebaixada, anel tracejado, coruja vigiando. No arraste ela trabalha. Arquivo vira linha de papel com tamanho mono e X. Sem nuvem genérica.
Dados
MetricWidget
Métrica: rótulo de máquina, número em Sora tabular, contexto embaixo. O tom é luz, não faixa. Bar mostra proporção.
Marca
HibouMark
O símbolo oficial, com o traço exato do imagotipo. Ocioso ele pisca a cada 6 s; trabalhando ganha órbita. É o ícone do agente.