Progress

Barra de progreso para estado de completado o carga

Barra de progreso basada en Ark UI Progress. Usa la API de conveniencia con value (y opcional showLabel) o la API compuesta para un layout personalizado.

60%

import { Progress } from "@/components/ui/progress";

export default function Example() {
  return <Progress value={60} showLabel />;
}

View Code

Instalación

bash

liminal add progress

Uso

Pasa value (0–100 por defecto) y, si quieres, min, max y showLabel para mostrar el porcentaje sobre la pista.

33%

80%

import { Progress } from "@/components/ui/progress";

<Progress value={33} showLabel />
<Progress value={80} showLabel />

View Code

Ejemplos

Rango personalizado (min / max)

50%

<Progress value={25} min={0} max={50} showLabel />

View Code

API compuesta

Usa ProgressRoot, ProgressLabel, ProgressValueText, ProgressTrack y ProgressRange para un layout a medida.

tsx

import {
  ProgressRoot,
  ProgressLabel,
  ProgressValueText,
  ProgressTrack,
  ProgressRange,
} from "@/components/ui/progress";

export default function Example() {
  return (
    <ProgressRoot value={50} min={0} max={100}>
      <div className="mb-2 flex justify-between">
        <ProgressLabel>Subida</ProgressLabel>
        <ProgressValueText />
      </div>
      <ProgressTrack>
        <ProgressRange />
      </ProgressTrack>
    </ProgressRoot>
  );
}

API

Prop	Type	Default	Description
value	number	-	Valor actual (controlado o no según la raíz de Ark).
min	number	0	Valor mínimo.
max	number	100	Valor máximo.
showLabel	boolean	false	Muestra el texto del valor sobre la barra (API de conveniencia).

El Progress de conveniencia pasa el resto de props a ProgressRoot. Ver Ark Progress para la API completa de la raíz.