Skip to content
Nim UI

Progress

The Progress component displays a horizontal bar that fills based on a value, indicating completion status. It supports color variants, three sizes, and an optional percentage label.

Import

import { Progress } from '@nim-ui/components';

Basic Usage

Default Progress

View Code 
<Progress value={60} />

Variants

Five color variants to communicate different states.

Progress Variants

View Code 
<Progress value={60} variant="default" />
<Progress value={80} variant="success" />
<Progress value={45} variant="warning" />
<Progress value={30} variant="danger" />
<Progress value={70} variant="info" />

Sizes

Three sizes: sm, md (default), and lg. The percentage label is only visible at lg size.

Progress Sizes

50%
View Code 
<Progress value={50} size="sm" />
<Progress value={50} size="md" />
<Progress value={50} size="lg" showLabel />

Props

Name Type Default Description
value * number - Current progress value
max number 100 Maximum value
variant 'default' | 'success' | 'warning' | 'danger' | 'info' 'default' Color variant of the progress indicator
size 'sm' | 'md' | 'lg' 'md' Height of the progress bar
showLabel boolean false Display percentage text (only visible at lg size)
className string - Additional CSS classes

Usage Examples

File Upload Progress

function FileUpload({ progress }: { progress: number }) {
  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <span>Uploading...</span>
        <span>{progress}%</span>
      </div>
      <Progress
        value={progress}
        variant={progress === 100 ? 'success' : 'default'}
        size="md"
      />
    </div>
  );
}

Accessibility

  • Uses role="progressbar" for screen reader support
  • Includes aria-valuenow, aria-valuemin, and aria-valuemax attributes
  • Smooth width transition with duration-slow easing
  • Spinner — Indeterminate loading indicator
  • Skeleton — Content placeholder