Fortschritt

"use client"

import * as React from "react"

Der Fortschrittsbalken meldet, wie viel einer Aufgabe erledigt ist – eine Leiste, die sich von 0 bis 100 füllt. Basiert auf der Komponente Base UI Progress und ist nach dem neobrutalistischen Rezept gestaltet: dicker Rahmen, harter Schatten, deckende Füllung.

Typische Anwendungsfälle:

• Datei-Uploads und -Downloads – determinierter, byteweise getriebener Fortschritt mit sichtbarer Prozentzahl.
• Mehrstufige Abläufe – Onboarding, Checkout und Assistenten; die Leiste zeigt, wie weit man gekommen ist.
• Langlaufende Jobs – Importe, Exporte und Installationen, deren Fortschritt der Server meldet.

Installation#

pnpmnpmyarnbun
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
Kopieren

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

"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 }

Verwendung#

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

Kopieren<Progress value={33} />

Komposition#

Mit Label und Wert#

Verwende ProgressLabel und ProgressValue, um eine Anzeige von Label und Wert hinzuzufügen.

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

KopierenProgress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Beispiele#

Label#

Verwende ProgressLabel und ProgressValue, um eine Anzeige von Label und Wert hinzuzufügen.

import {
  Progress,
  ProgressLabel,

Gesteuert#

Ein Fortschrittsbalken, der über einen Slider gesteuert werden kann.

"use client"

import * as React from "react"

RTL#

Um RTL-Unterstützung in Neobrutalism zu aktivieren, sieh dir die RTL-Konfigurationsanleitung an.

"use client"

import * as React from "react"

Barrierefreiheit#

Progress ist eine Statusanzeige und kein Steuerelement – sie erhält nie den Fokus und hat keine Tastaturinteraktionen. Base UI rendert role="progressbar" mit aria-valuemin, aria-valuemax und aria-valuenow, und ProgressLabel wird automatisch über aria-labelledby verknüpft – bevorzuge es (oder ein aria-label) gegenüber einer unbeschrifteten Leiste, damit Screenreader ansagen können, was gerade lädt, und nicht nur die Prozentzahl. Übergib value={null}, wenn der Fortschritt unbekannt ist; die Leiste wechselt dann in einen indeterminierten Zustand.

API-Referenz#

Sieh dir die Dokumentation von Base UI Progress an.