On this page

Progress

Progress bar component for displaying progress indicators with various styles, sizes, and label positions.

import { Progress } from "@ninna-ui/feedback";

pnpm add @ninna-ui/feedback@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Progress component in your application.

import { Progress } from "@ninna-ui/feedback";

export default function Example() {
  return (
    <div>
      <Progress value={50} />
      <Progress value={75} color="success" showValue labelPosition="right" />
      <Progress indeterminate color="primary" />
    </div>
  );
}

Basic

Simple progress bars with different values.

Live preview/ Default

Colors

Progress bars in different color themes.

Live preview/ Default

Sizes

Progress bars in different sizes from xs to xl.

Live preview/ Default

Variants

Different visual styles including striped and animated.

Live preview/ Default

Default

Striped

Animated

With Label

Progress bars with value labels in different positions.

Live preview/ Default

Label on Right (default)

65%

Label on Left

45%

Label on Top

Upload Progress80%

Label Inside (requires lg or xl size)

55%

Custom Label

Progress bars with custom label formatting.

Live preview/ Default

Custom Format (MB)

750MB / 1000MB

Custom Format (Steps)

Step 3 of 5

Custom Format (Files)

Uploading files...42 / 100 files

Indeterminate

Indeterminate progress for unknown duration tasks.

Live preview/ Default

Indeterminate Loading

Different Colors

Different Sizes

Use Cases

Real-world progress bar usage examples.

Live preview/ Default

File Upload

Uploading document.pdf0%

Storage Usage

7.5GB / 10GB

You are using 75% of your storage. Consider upgrading your plan.

Multi-step Form Progress

Complete your profileStep 2 of 4

✓ Personal Info✓ Contact→ PreferencesReview

Loading Content

Loading your dashboard...

Skill Levels

React90%

TypeScript85%

Node.js75%

API Reference

Complete list of props for the Progress component.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress value (0 to max)
`max`	`number`	`100`	Maximum value for the progress
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size of the progress bar
`color`	`'neutral' \| 'primary' \| 'secondary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color theme of the progress bar
`variant`	`'default' \| 'striped' \| 'animated'`	`'default'`	Visual style variant
`showValue`	`boolean`	`false`	Whether to show the value label
`labelPosition`	`'left' \| 'right' \| 'top' \| 'inside' \| 'none'`	`'right'`	Position of the value label
`formatLabel`	`(value: number, max: number) => ReactNode`	`—`	Custom format function for the value label
`indeterminate`	`boolean`	`false`	Whether the progress is indeterminate (loading state)
`label`	`string`	`—`	Accessible label for screen readers
`className`	`string`	`—`	Additional CSS classes for the container
`trackClassName`	`string`	`—`	Additional CSS classes for the track (background)
`indicatorClassName`	`string`	`—`	Additional CSS classes for the indicator (filled part)

Accessibility

Uses role="progressbar" for screen reader support
Includes aria-valuenow, aria-valuemin, and aria-valuemax attributes
Supports aria-label for custom accessible labels
Indeterminate state uses aria-busy="true" to indicate loading
Color contrast meets WCAG AA standards for all color variants
Animations respect prefers-reduced-motion media query
Label positions provide visual context without affecting accessibility