Progress

A progress indicator component with multiple variants, sizes, and animation support

Installation

Install the Progress component using the nocta-ui CLI:

Terminal

npx nocta-ui add progress

Then import the component:

Import

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

Basic Usage

Default Progress

Basic progress65%

Variants

The Progress component supports four variants: default, success, warning, and destructive.

Default progress60%

Success progress75%

Warning progress45%

Error progress30%

Sizes

Three size options are available: sm, md, and lg. The default size is md.

Small

Medium

Large

Animated Progress

Progress automatically animates when the value changes.

Animated progress0%

Custom Maximum Value

Set a custom maximum value using the max prop.

Custom max value75%

Large max value50%

Without Label

Hide the label by omitting the showLabel prop.

Real-world Example

File Upload Progress

document.pdf2.4 MB

File upload progress0%

Customization

Custom Styling

The Progress component accepts a className prop for custom styling:

Custom Styling

<Progress 
  value={75} 
  className="w-full max-w-md" 
  showLabel 
/>

<Progress 
  value={60} 
  className="h-6 rounded-lg" 
  variant="success" 
/>

Accessibility

The Progress component includes proper ARIA attributes:

role="progressbar" for screen readers
aria-valuemin, aria-valuemax, and aria-valuenow for progress values
aria-label for descriptive labels
Proper focus management

Accessibility Example

<Progress 
  value={50} 
  aria-label="File download progress" 
  showLabel 
/>

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress value
`max`	`number`	`100`	Maximum progress value
`variant`	`'default' \| 'success' \| 'warning' \| 'destructive'`	`'default'`	Progress bar color variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Progress bar height
`showLabel`	`boolean`	`false`	Show progress label and percentage
`indeterminate`	`boolean`	`false`	Show indeterminate/loading state
`className`	`string`	`''`	Additional CSS classes
`aria-label`	`string`	—	Accessible label for screen readers

The Progress component also accepts all standard HTML div attributes.

On this page