Progreso

Una barra estrecha que se va llenando a medida que se completa una tarea —subidas, instalaciones, procesos de incorporación de varios pasos— con ese estilo neobrutalista de bordes y sombras.

"use client"

import * as React from "react"

La barra de progreso informa de qué parte de una tarea está hecha: una pista que se llena de 0 a 100. Está construida sobre el componente Base UI Progress y sigue la receta neobrutalista: borde grueso, sombra marcada y relleno sólido.

Recurre a este componente cuando:

Subidas y descargas de archivos — progreso determinado, guiado por bytes, con un porcentaje visible.
Flujos de varios pasos — onboarding, pago y asistentes; la barra muestra cuánto ha avanzado el usuario.
Trabajos de larga duración — importaciones, exportaciones e instalaciones que informan de su avance desde el servidor.

Instalación


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
npx shadcn@latest add https://neobrutalism.com/r/base/progress.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/progress.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/progress.json

Instala las siguientes dependencias:


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Copia y pega el siguiente código en tu proyecto.

components/ui/progress.tsx

"use client"

import * as React from "react"
import { Progress as ProgressPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Progress({
  className,
  value,
  ...props
}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
  return (
    <ProgressPrimitive.Root
      data-slot="progress"
      className={cn(
        "relative flex h-4 w-full items-center overflow-hidden rounded border-2 bg-background",
        className
      )}
      {...props}
    >
      <ProgressPrimitive.Indicator
        data-slot="progress-indicator"
        className="size-full flex-1 bg-primary transition-all"
        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
      />
    </ProgressPrimitive.Root>
  )
}

export { Progress }

Actualiza las rutas de importación según la configuración de tu proyecto.

Uso

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

<Progress value={33} />

Composición

Con etiqueta y valor

Usa ProgressLabel y ProgressValue para mostrar una etiqueta y un valor.

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@/components/ui/progress"
 
;<Progress value={56} className="w-full max-w-sm">
  <ProgressLabel>Upload progress</ProgressLabel>
  <ProgressValue />
</Progress>

Progress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Ejemplos

Etiqueta

Usa ProgressLabel y ProgressValue para mostrar una etiqueta y un valor.

Upload progress

import {
  Progress,
  ProgressLabel,

Controlado

Una barra de progreso que se puede controlar con un slider.

"use client"

import * as React from "react"

RTL

Para activar el soporte RTL en Neobrutalism, consulta la guía de configuración de RTL.

تقدم الرفع

"use client"

import * as React from "react"

Accesibilidad

El progreso es un indicador de estado, no un control: nunca recibe el foco y no tiene interacciones de teclado. Base UI renderiza role="progressbar" con aria-valuemin, aria-valuemax y aria-valuenow, y ProgressLabel se asocia automáticamente mediante aria-labelledby: prefiérelo (o un aria-label) antes que una barra sin etiquetar, para que los lectores de pantalla puedan decir qué se está cargando y no solo el porcentaje. Pasa value={null} cuando el avance sea desconocido; la barra cambia a un estado indeterminado.

Referencia de API

Consulta la documentación Base UI Progress.