Avanzamento

Una barra sottile che si riempie man mano che un’operazione viene completata — caricamenti, installazioni, procedure di onboarding in più fasi — con lo stile neobrutalista caratterizzato da bordi e ombre.

"use client"

import * as React from "react"

La barra di progresso comunica quanta parte di un’operazione è stata completata — una traccia che si riempie da 0 a 100. Costruita sul componente Base UI Progress e rifinita secondo la ricetta neobrutalista: bordo spesso, ombra netta, riempimento pieno.

Quando usarlo:

Caricamenti e download di file — progresso determinato, guidato dai byte, con una percentuale visibile.
Flussi in più passaggi — onboarding, checkout e wizard; la barra mostra a che punto è l’utente.
Operazioni lunghe — import, export e installazioni che riportano l’avanzamento dal server.

Installazione


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

Installa le seguenti dipendenze:


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

Copia e incolla il seguente codice nel tuo progetto.

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 }

Aggiorna i percorsi di importazione in base alla configurazione del tuo progetto.

Utilizzo

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

<Progress value={33} />

Composizione

Con etichetta e valore

Usa ProgressLabel e ProgressValue per mostrare un’etichetta e un valore.

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

Esempi

Etichetta

Usa ProgressLabel e ProgressValue per mostrare un’etichetta e un valore.

Upload progress

import {
  Progress,
  ProgressLabel,

Controllato

Una barra di avanzamento che può essere controllata con uno slider.

"use client"

import * as React from "react"

RTL

Per abilitare il supporto RTL in Neobrutalism, consulta la guida alla configurazione RTL.

تقدم الرفع

"use client"

import * as React from "react"

Accessibilità

Progress è un indicatore di stato, non un controllo — non riceve mai il focus e non ha interazioni da tastiera. Base UI rende role="progressbar" con aria-valuemin, aria-valuemax e aria-valuenow, e ProgressLabel viene associata automaticamente tramite aria-labelledby — preferiscila (o un aria-label) a una barra senza etichetta, così gli screen reader possono dire che cosa si sta caricando, non soltanto la percentuale. Passa value={null} quando il completamento non è noto; la barra passa allo stato indeterminato.

Riferimento API

Consulta la documentazione Base UI Progress.