Progress

Displays an indicator showing the completion progress of a task. Built for React applications with Next.js integration and TypeScript support.

Those loading bars you see everywhere? File uploads, form submissions, installation wizards - that's what progress bars are for. They let people know stuff is actually happening and how much longer they need to wait.

Animated progress indicator

Watch it fill up as your task completes:

Loading component...

Built on Radix UI Progress with proper ARIA attributes, so screen readers announce the progress too. This free open source React component handles all the accessibility stuff while you focus on making it look good.

npx shadcn@latest add progress

Why progress bars beat spinners

Sometimes a spinner just doesn't cut it. When you know how far along something is, show it:

Sets expectations - People know if they should grab coffee or wait
Shows it's working - Proof something's actually happening
Reduces anxiety - Unknown wait times stress people out
Accessible by default - Screen readers announce the percentage
Better for long tasks - Essential for uploads, downloads, multi-step processes
Cancellation decisions - Users can decide if it's worth waiting

Useful progress patterns

File upload with progress

Show real upload progress with file info:

Loading component...

"use client"import * as React from "react"import { Progress } from "@/components/ui/progress"import { Button } from "@/components/ui/button"import { Upload, X, CheckCircle } from "lucide-react"export default function ProgressUpload() {  const [progress, setProgress] = React.useState(0)  const [isUploading, setIsUploading] = React.useState(false)  const simulateUpload = () => {    setIsUploading(true)    setProgress(0)        const interval = setInterval(() => {      setProgress((prev) => {        if (prev >= 100) {          clearInterval(interval)          setTimeout(() => {            setIsUploading(false)            setProgress(0)          }, 1000)          return 100        }        return prev + 10      })    }, 300)  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md space-y-4">        {!isUploading ? (          <Button onClick={simulateUpload} className="w-full">            <Upload className="mr-2 h-4 w-4" />            Upload File          </Button>        ) : (          <div className="space-y-2">            <div className="flex items-center justify-between text-sm">              <span className="text-muted-foreground">                {progress < 100 ? "Uploading document.pdf..." : "Upload complete!"}              </span>              <span className="font-medium">                {progress}%              </span>            </div>            <Progress value={progress} className="w-full" />            <div className="flex items-center justify-between text-xs text-muted-foreground">              <span>2.4 MB / 3.2 MB</span>              {progress < 100 ? (                <Button variant="ghost" size="sm" className="h-6 px-2">                  <X className="h-3 w-3" />                  Cancel                </Button>              ) : (                <CheckCircle className="h-4 w-4 text-green-500" />              )}            </div>          </div>        )}      </div>    </div>  )}

Multi-step form progress

Track progress through a wizard or onboarding:

Loading component...

"use client"import * as React from "react"import { Progress } from "@/components/ui/progress"import { Button } from "@/components/ui/button"import { ChevronLeft, ChevronRight } from "lucide-react"export default function ProgressSteps() {  const [currentStep, setCurrentStep] = React.useState(1)  const totalSteps = 4  const progress = (currentStep / totalSteps) * 100  const steps = [    "Personal Info",    "Account Setup",     "Preferences",    "Review"  ]  const nextStep = () => {    if (currentStep < totalSteps) {      setCurrentStep(currentStep + 1)    }  }  const prevStep = () => {    if (currentStep > 1) {      setCurrentStep(currentStep - 1)    }  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md space-y-6">        <div className="space-y-2">          <div className="flex justify-between text-sm">            <span className="font-medium">              Step {currentStep} of {totalSteps}            </span>            <span className="text-muted-foreground">              {steps[currentStep - 1]}            </span>          </div>          <Progress value={progress} className="w-full" />        </div>                <div className="flex justify-between">          <Button            variant="outline"            size="sm"            onClick={prevStep}            disabled={currentStep === 1}          >            <ChevronLeft className="mr-1 h-4 w-4" />            Previous          </Button>          <Button            size="sm"            onClick={nextStep}            disabled={currentStep === totalSteps}          >            {currentStep === totalSteps ? "Complete" : "Next"}            {currentStep !== totalSteps && (              <ChevronRight className="ml-1 h-4 w-4" />            )}          </Button>        </div>      </div>    </div>  )}

Loading states with progress

Better than a spinner when you know the timeline:

Loading component...

"use client"import * as React from "react"import { Progress } from "@/components/ui/progress"import { Button } from "@/components/ui/button"import { RefreshCw } from "lucide-react"export default function ProgressLoading() {  const [progress, setProgress] = React.useState(0)  const [isLoading, setIsLoading] = React.useState(false)  const [status, setStatus] = React.useState("")  const startLoading = () => {    setIsLoading(true)    setProgress(0)    setStatus("Connecting to server...")        // Simulate different loading stages    setTimeout(() => {      setProgress(25)      setStatus("Fetching data...")    }, 500)        setTimeout(() => {      setProgress(50)      setStatus("Processing results...")    }, 1200)        setTimeout(() => {      setProgress(75)      setStatus("Preparing display...")    }, 2000)        setTimeout(() => {      setProgress(100)      setStatus("Complete!")      setTimeout(() => {        setIsLoading(false)        setProgress(0)        setStatus("")      }, 1000)    }, 3000)  }  return (    <div       className="flex justify-center self-start pt-6 w-full"       style={{         all: 'revert',        display: 'flex',        justifyContent: 'center',        alignSelf: 'flex-start',        paddingTop: '1.5rem',        width: '100%',        fontSize: '14px',        lineHeight: '1.5',        letterSpacing: 'normal'      }}    >      <div className="w-full max-w-md space-y-4">        {!isLoading ? (          <Button onClick={startLoading} className="w-full">            <RefreshCw className="mr-2 h-4 w-4" />            Load Data          </Button>        ) : (          <div className="space-y-3">            <Progress value={progress} className="w-full" />            <div className="text-center">              <p className="text-sm text-muted-foreground">{status}</p>              {progress < 100 && (                <p className="text-xs text-muted-foreground mt-1">                  Please wait...                </p>              )}            </div>          </div>        )}      </div>    </div>  )}

These patterns work because they give users real information. Upload progress that actually moves, form steps that show how far you've come, loading states that don't feel endless.

Perfect for user feedback

Works great anywhere you've got something that takes time - file operations, data processing, form wizards, installation flows. The kind of stuff where users need to know it's worth sticking around.

Drops right into Next.js projects. TypeScript support included. Styled with Tailwind CSS to match the shadcn design system.

Built on Radix UI

Under the hood it's all Radix UI Progress, which means:

ARIA compliant - Proper progressbar role and attributes
Screen reader support - Announces current value and completion
Indeterminate state - For when you don't know the progress
Custom value labels - Format the announcement however you want
Min/max support - Not just 0-100, use any range
Data attributes - Style based on loading, complete, or indeterminate states

API Reference

The root container that provides context and accessibility.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`value`	`number \| null`	`0`	Current progress value
`max`	`number`	`100`	Maximum progress value
`getValueLabel`	`(value: number, max: number) => string`	-	Custom label for screen readers
`asChild`	`boolean`	`false`	Pass functionality to child element

Data attributes:

[data-state]: "complete" | "indeterminate" | "loading"
[data-value]: Current value
[data-max]: Maximum value

Progress Indicator

The visual fill that shows progress. This is built into the shadcn component by default.

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
`asChild`	`boolean`	`false`	Pass functionality to child element

States

State	When	Visual
Loading	`0 < value < max`	Partial fill
Complete	`value >= max`	Full fill
Indeterminate	`value = null`	Animation or pulse

Common Patterns

Pattern	Use Case	Implementation
Percentage label	Show exact progress	Add text above/below bar
Stepped progress	Multi-step forms	Multiple bars or segments
Circular progress	Compact spaces	Use radial variant
Buffering	Video/audio players	Two-layer progress

Make progress feel right

Things to remember when adding progress bars:

Start immediately - Show 1% right away so they know it started
Keep it moving - Stalled progress feels broken
Be honest - Don't fake it to 90% then hang forever
Show what's happening - "Uploading photo..." is better than just a bar
Handle errors gracefully - What happens if it fails at 67%?
Consider time estimates - "About 30 seconds remaining" helps a lot
Allow cancellation - Long operations need an escape hatch
Celebrate completion - Quick success state before moving on

Progress

Reactprogress

Reactprogress

Reactbutton

Reactprogress

Reactbutton

Reactprogress

Reactbutton

On this page