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

Code

<Progress value={60} />

Variants

Five color variants to communicate different states.

Code

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

Sizes

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

50%

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' \| 'error' \| '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 over the --duration-slow token (300ms)

Spinner — Indeterminate loading indicator
Skeleton — Content placeholder

On this page