Voortgang

Een smalle balk die volloopt zodra een taak is voltooid — uploads, installaties, een onboarding in meerdere stappen — met die neobrutalistische stijl van randen en schaduwen.

"use client"

import * as React from "react"

De progress bar meldt hoeveel van een taak af is — een balk die zich vult van 0 tot 100. Gebouwd op de Base UI Progress-component en vormgegeven volgens het neobrutalistische recept: een dikke rand, een scherpe schaduw en een egale vulling.

Ideaal voor:

Bestandsuploads en -downloads — determinate voortgang op basis van bytes, met een zichtbaar percentage.
Flows met meerdere stappen — onboarding, checkout en wizards; de balk laat zien hoe ver de gebruiker is.
Langlopende taken — imports, exports en installaties waarvan de server de voortgang doorgeeft.

Installatie


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

Installeer de volgende afhankelijkheden:


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

Kopieer en plak de volgende code in je project.

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 }

Werk de importpaden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

<Progress value={33} />

Compositie

Met label en waarde

Gebruik ProgressLabel en ProgressValue om een weergave van label en waarde toe te voegen.

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

Voorbeelden

Label

Gebruik ProgressLabel en ProgressValue om een weergave van label en waarde toe te voegen.

Upload progress

import {
  Progress,
  ProgressLabel,

Gecontroleerd

Een voortgangsbalk die met een slider kan worden bediend.

"use client"

import * as React from "react"

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

تقدم الرفع

"use client"

import * as React from "react"

Toegankelijkheid

Progress is een statusindicator, geen besturingselement — hij krijgt nooit focus en kent geen toetsenbordinteracties. Base UI rendert role="progressbar" met aria-valuemin, aria-valuemax en aria-valuenow, en ProgressLabel wordt automatisch gekoppeld via aria-labelledby — geef daaraan (of aan een aria-label) de voorkeur boven een balk zonder label, zodat schermlezers kunnen zeggen wát er laadt, niet alleen het percentage. Geef value={null} door wanneer de voortgang onbekend is; de balk schakelt dan over naar een indeterminate status.

API-referentie

Zie de documentatie van Base UI Progress.