प्रगति

"use client"

import * as React from "react"

प्रोग्रेस बार बताता है कि कोई कार्य कितना पूरा हुआ — ट्रैक जो 0 से 100 भरता है। यह Base UI Progress कंपोनेंट पर बना है और नियोब्रूटलिस्ट रेसिपी के अनुसार स्टाइल: मोटा बॉर्डर, कठोर छाया, ठोस भरना।

इसे इन स्थितियों में चुनें:

• फ़ाइल अपलोड और डाउनलोड — determinate, बाइट-चालित प्रगति, दिखने वाला प्रतिशत।
• मल्टी-स्टेप फ़्लो — ऑनबोर्डिंग, चेकआउट, विज़ार्ड; बार दिखाता है उपयोगकर्ता कहाँ तक पहुँचा।
• लंबे जॉब — इंपोर्ट, एक्सपोर्ट, इंस्टॉल जो सर्वर से पूर्णता बताते हैं।

इंस्टॉलेशन#

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
कॉपी करें

pnpmnpmyarnbun
pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react
कॉपी करें

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

उपयोग#

कॉपी करेंimport { Progress } from "@/components/ui/progress"

कॉपी करें<Progress value={33} />

कंपोज़िशन#

लेबल और मान के साथ#

लेबल और मान प्रदर्शित करने के लिए ProgressLabel और ProgressValue का उपयोग करें.

कॉपी करें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

उदाहरण#

लेबल#

लेबल और मान प्रदर्शित करने के लिए ProgressLabel और ProgressValue का उपयोग करें.

import {
  Progress,
  ProgressLabel,

नियंत्रित#

एक प्रोग्रेस बार जिसे slider से नियंत्रित किया जा सकता है.

"use client"

import * as React from "react"

RTL#

Neobrutalism में RTL समर्थन सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें.

"use client"

import * as React from "react"

एक्सेसिबिलिटी#

प्रोग्रेस एक स्टेटस संकेतक है, कंट्रोल नहीं — कभी फ़ोकस नहीं लेता और कीबोर्ड इंटरैक्शन नहीं। Base UI role="progressbar" रेंडर करता है, aria-valuemin, aria-valuemax और aria-valuenow के साथ, और ProgressLabel aria-labelledby से अपने आप जुड़ता है — बिना लेबल वाले बार के बजाय इसे (या aria-label) प्राथमिकता दें ताकि स्क्रीन रीडर सिर्फ़ प्रतिशत नहीं, क्या लोड हो रहा है भी बता सकें। पूर्णता अज्ञात हो तो value={null} पास करें; बार indeterminate स्थिति में चला जाता है।

API रेफ़रेंस#

Base UI Progress दस्तावेज़ देखें.