Skip to Content
ComponentsAtomsProgress

Progress

Atom

Progress mostra avanço mensurável. Use apenas quando existe total conhecido ou critério claro de conclusão.

Use Progress para upload, processamento, onboarding, cobertura de checklist ou sincronização com percentual conhecido. Para espera indeterminada, use Spinner ou Skeleton.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoProgressProps = {
  value: number
  max?: number
  label: string
  description?: string
  showValue?: boolean
}
 
export function PulsoProgress({
  value,
  max = 100,
  label,
  description,
  showValue = true,
}: PulsoProgressProps) {
  const safeValue = Math.min(Math.max(value, 0), max)
  const percent = Math.round((safeValue / max) * 100)
 
  return (
    <div className="grid gap-2">
      <div className="flex items-end justify-between gap-3">
        <div>
          <p className="text-sm font-medium text-[var(--fg)]">{label}</p>
          {description ? (
            <p className="mt-0.5 text-xs text-[var(--fg-muted)]">{description}</p>
          ) : null}
        </div>
        {showValue ? (
          <span className="font-mono text-sm font-semibold tabular-nums text-[var(--fg-muted)]">
            {percent}%
          </span>
        ) : null}
      </div>
 
      <div
        role="progressbar"
        aria-label={label}
        aria-valuemin={0}
        aria-valuemax={max}
        aria-valuenow={safeValue}
        className="h-2 overflow-hidden rounded-full bg-[var(--muted)]"
      >
        <div
          className="h-full rounded-full bg-[var(--primary)] transition-[width] duration-[var(--motion-duration-base)] ease-[var(--motion-easing)]"
          style={{ width: `${percent}%` }}
        />
      </div>
    </div>
  )
}
<PulsoProgress
  label="Cobertura de fontes"
  description="Fontes auditáveis verificadas para o caso PLS-012."
  value={72}
/>

Quando usar

  • Upload, importação ou processamento com total conhecido.
  • Cobertura de checklist, fontes ou etapas concluídas.
  • Onboarding com número finito de passos.
  • Sincronização quando há percentual real.

Quando não usar

  • Espera indeterminada; use Spinner ou Skeleton.
  • Métrica de risco ou severidade.
  • Comparação entre categorias; use chart/bar adequado.
  • Progresso falso sem base mensurável.

Acessibilidade

  • Use role="progressbar".
  • Informe aria-valuemin, aria-valuemax e aria-valuenow quando determinado.
  • Mantenha label visível ou aria-label específico.
  • Mostre percentual textual quando ele ajuda decisão.

Regras

  1. Valor deve refletir total conhecido.
  2. Não use Progress como decoração de card.
  3. Não confunda cobertura com confiança de IA.
  4. Motion deve ser suave e respeitar prefers-reduced-motion.
  5. Se o processo travar, troque para estado de erro/partial com explicação.
Last updated on
PaginationRadio Group