Progress

Muestra un indicador del progreso de finalización de una tarea, típicamente de forma visual en una barra de progreso.

default.tsx

1'use client';
2
3import * as React from 'react';
4import { Progress } from '@/components/ui/progress';
5
6export function Default() {
7  const [progress, setProgress] = React.useState(13);
8
9  React.useEffect(() => {
10    const timer = setTimeout(() => setProgress(66), 500);
11    return () => clearTimeout(timer);
12  }, []);
13
14  return <Progress value={progress} className="w-[60%]" />;
15}

Instalación

pnpm dlx nachui add progress

Anatomía

1import { Progress } from '@/components/ui/progress';

1<Progress value={33} />

Variantes

Predeterminado (Default)

default.tsx

1'use client';
2
3import * as React from 'react';
4import { Progress } from '@/components/ui/progress';
5
6export function Default() {
7  const [progress, setProgress] = React.useState(13);
8
9  React.useEffect(() => {
10    const timer = setTimeout(() => setProgress(66), 500);
11    return () => clearTimeout(timer);
12  }, []);
13
14  return <Progress value={progress} className="w-[60%]" />;
15}

Indeterminado (Indeterminate)

Cuando el value es nulo o no se proporciona, la barra se anima infinitamente para mostrar un proceso de duración desconocida.

indeterminate.tsx

1'use client';
2
3import { Progress } from '@/components/ui/progress';
4
5export function Indeterminate() {
6  return <Progress className="w-[60%]" />;
7}

Con Valor (With Value Display)

Combina este componente con etiquetas personalizadas que marquen el porcentaje.

Downloading...0%

with-value.tsx

1'use client';
2
3import * as React from 'react';
4import { Progress } from '@/components/ui/progress';
5
6export function WithValue() {
7  const [value, setValue] = React.useState(0);
8
9  React.useEffect(() => {
10    const interval = setInterval(() => {
11      setValue((v) => (v >= 100 ? 0 : v + 10));
12    }, 1000);
13    return () => clearInterval(interval);
14  }, []);
15
16  return (
17    <div className="flex w-[60%] flex-col gap-2">
18      <div className="flex justify-between text-sm font-medium">
19        <span>Downloading...</span>
20        <span>{value}%</span>
21      </div>
22      <Progress value={value} />
23    </div>
24  );
25}

Referencia de API

Progress

Prop	Tipo	Por defecto	Descripción
`value`	`number \| null`	-	Porcentaje del progreso (animación infinita si es null)
`max`	`number`	`100`	El valor máximo para 100% de progreso
`className`	`string`	-	Clases CSS adicionales

AnteriorPopover SiguienteRadio