Progress

Displays a progress bar with an optional label.

Docs
progress-demo.tsx
import * as React from "react"
 
import { Progress } from "@/components/ui/progress"
 
export function ProgressDemo() {
	const [value, setValue] = React.useState(0)
 
	React.useEffect(() => {
		const interval = setInterval(() => {
			setValue((prev) => (prev === 100 ? 100 : prev + 2))
		}, 100)
		return () => clearInterval(interval)
	}, [])
 
	return (
		<div className="w-80">
			<Progress value={value} />
		</div>
	)
}

Installation

npx shadcn@latest add https://9ui.dev/r/progress

Usage

Imports
import { Progress, ProgressValue } from "@/components/ui/progress"
Anatomy
<Progress>
	<ProgressValue />
</Progress>

Examples

With Value

progress-with-value.tsx
import * as React from "react"
 
import { Progress, ProgressValue } from "@/components/ui/progress"
 
export function ProgressWithValueDemo() {
	const [value, setValue] = React.useState(0)
 
	React.useEffect(() => {
		const interval = setInterval(() => {
			setValue((prev) => (prev === 100 ? 100 : prev + 2))
		}, 100)
		return () => clearInterval(interval)
	}, [])
 
	return (
		<div className="w-80">
			<Progress value={value}>
				<ProgressValue />
			</Progress>
		</div>
	)
}