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

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

Colors

Progress bars in different color themes.

Sizes

Progress bars in different sizes from xs to xl.

Variants

Different visual styles including striped and animated.

Default

Striped

Animated

With Label

Progress bars with value labels in different positions.

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.

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.

Indeterminate Loading

Different Colors

Different Sizes

Use Cases

Real-world progress bar usage examples.

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