Progress

Ready

Visual progress indicators for loading states and operations

Basic Progress

Simple progress bar

Progress0%

Color Variants

Different semantic colors for progress states

Default45%
Success100%
Warning75%
Error25%

Progress Values

Various progress states from 0-100%

Starting0%
Quarter25%
Half50%
Three Quarters75%
Complete100%

Upload Example

Common use case for file uploads

project-files.zip

2.4 MB

85%

Installation

Install the required dependencies

npm install @radix-ui/react-progress

Usage

Basic implementation example

import { Progress } from '@/components/ui/progress'

export default function Example() {
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <span>Progress</span>
        <span>66%</span>
      </div>
      <Progress value={66} />
    </div>
  )
}

Props

Progress component props

PropTypeDefaultDescription
valuenumber0Progress value (0-100)
variant'default' | 'success' | 'warning' | 'error''default'Color variant
maxnumber100Maximum value

Features

Built-in functionality

  • 4 color variants - Default, success, warning, error
  • Smooth animation - 300ms transition on value change
  • Accessible - ARIA progressbar role
  • 0-100 range - Standard percentage values
  • Dark mode support - Adapts to theme
  • Full border radius - Rounded pill design