Progres

"use client"

import * as React from "react"

Progress bar melaporkan seberapa jauh sebuah tugas selesai — jalur yang terisi dari 0 hingga 100. Dibangun di atas komponen Base UI Progress dan ditata dengan resep neobrutalis: garis tepi tebal, bayangan pekat, isian solid.

Gunakan komponen ini saat:

• Unggah dan unduh file — progres determinat berbasis byte dengan persentase yang terlihat.
• Alur multilangkah — onboarding, checkout, dan wizard; bilah menunjukkan sejauh mana pengguna telah melangkah.
• Pekerjaan yang berjalan lama — impor, ekspor, dan instalasi yang melaporkan penyelesaiannya dari server.

Instalasi#

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
Salin

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

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

Penggunaan#

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

Salin<Progress value={33} />

Komposisi#

Dengan label dan nilai#

Gunakan ProgressLabel dan ProgressValue untuk menambahkan tampilan label dan nilai.

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

SalinProgress
├── ProgressLabel
├── ProgressValue
└── ProgressTrack
    └── ProgressIndicator

Contoh#

Label#

Gunakan ProgressLabel dan ProgressValue untuk menambahkan tampilan label dan nilai.

import {
  Progress,
  ProgressLabel,

Terkendali#

Progress bar yang dapat dikendalikan dengan sebuah slider.

"use client"

import * as React from "react"

RTL#

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas#

Progress adalah indikator status, bukan kontrol — ia tidak pernah menerima fokus dan tidak punya interaksi keyboard. Base UI merender role="progressbar" dengan aria-valuemin, aria-valuemax, dan aria-valuenow, dan ProgressLabel otomatis dikaitkan lewat aria-labelledby — utamakan itu (atau sebuah aria-label) daripada bilah tanpa label agar pembaca layar dapat menyebutkan apa yang sedang dimuat, bukan hanya persentasenya. Teruskan value={null} saat tingkat penyelesaiannya tidak diketahui; bilah akan beralih ke keadaan indeterminat.

Referensi API#

Lihat dokumentasi Base UI Progress.