Moodinary/UI

Progress

Avance medible (participación, exportación). Indeterminado si no sabés cuánto falta.

Barra de 6 px para la meta de pulsos y los límites del plan. El riel usa el gris del panel; el relleno es navy y pasa a verde cuando se alcanza la meta. Sin value queda indeterminada.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/progress.json
import
import { Progress } from "@moodinary/ui/components/progress";

Ejemplos

Determinado e indeterminado

El panel muestra pulsos recibidos respecto de la meta definida por la organización, no personas identificadas. También podés mostrar un límite del plan o una espera indeterminada.

¿Contestó mi gente?

24 de 30

Te faltan 6 para llegar a la meta.

Meta alcanzada, 30 de 30
Uso del plan, 60 de 100
Preparando el informe…
Código
states.tsx
import { Progress } from "@moodinary/ui/components/progress";

export default function ProgressStates() {
	return (
		<div className="grid w-full max-w-[420px] gap-5">
			<div className="grid gap-3">
				<h2 className="font-medium text-base">¿Contestó mi gente?</h2>
				<p className="font-semibold text-3xl tabular-nums tracking-tight">
					24
					<span className="font-normal text-lg text-muted-foreground">
						{" "}
						de 30
					</span>
				</p>
				<Progress aria-label="24 de 30 pulsos esta semana" value={80} />
				<p className="text-muted-foreground text-sm">
					Te faltan 6 para llegar a la meta.
				</p>
			</div>
			<div className="grid gap-1.5">
				<span className="text-[13px]">Meta alcanzada, 30 de 30</span>
				<Progress
					aria-label="30 de 30 pulsos esta semana"
					indicatorClassName="bg-m5"
					value={100}
				/>
			</div>
			<div className="grid gap-1.5">
				<span className="text-[13px]">Uso del plan, 60 de 100</span>
				<Progress
					aria-label="60 de 100 del límite del plan"
					max={100}
					value={60}
				/>
			</div>
			<div className="grid gap-1.5">
				<span className="text-[13px]">Preparando el informe…</span>
				<Progress aria-label="Preparando el informe" />
			</div>
		</div>
	);
}

Props

Progress

PropTipoDefaultDescripción
valuenumber-Valor actual; vacío = indeterminado.
maxnumber100Valor máximo.
indicatorClassNamestring-Clases del relleno.
classNamestring-Clases del riel.

Cuándo sí y cuándo no

Hacé
  • Ponele nombre con un label visible o aria-label.
  • Mostrá el número si ayuda a decidir.
  • Usá indeterminado cuando no sabés cuánto falta.
Evitá
  • No inventes porcentajes.
  • No lo uses para puntajes de clima.
  • No muevas la barra hacia atrás sin explicar.

Accesibilidad

  • Expone role="progressbar" y los valores ARIA cuando hay avance.