ProgressBar

The ProgressBar component is a versatile progress indicator that displays the completion status of a task or process. It supports multiple color variants, sizes, animations, gradient styles, and different label positioning options for creating engaging progress indicators.

Overview

The ProgressBar component is designed to provide flexible progress indication with:

Multiple color variants (primary, success, warning, danger, etc.)
Different sizes (small, medium, large)
Animation options (progress and indeterminate)
Gradient styles for modern UI
Label positioning variants (outside, inside, bubble, outline)
Soft/transparent variants
Dark mode support
Responsive design

Basic Usage

import { ProgressBar } from '@/components/atoms'

function MyComponent() {
  return (
    <div className='space-y-4'>
      {/* Basic progress bar */}
      <ProgressBar value={55} className='progressbar-primary' />
      
      {/* With percentage label */}
      <ProgressBar value={75} className='progressbar-success' showPercent />
      
      {/* With title and custom label position */}
      <ProgressBar 
        value={60} 
        className='progressbar-primary' 
        title='Project Progress'
        showPercent 
        percentLabelVariant='inside' 
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current progress value
`max`	`number`	`100`	Maximum progress value
`showPercent`	`boolean`	`false`	Whether to show percentage label
`percentLabelVariant`	`string`	`'outside'`	Label position ('outside', 'inside', 'bubble', 'outline')
`title`	`string`	`''`	Title text to display
`titlePercent`	`string`	`''`	Custom percentage text
`titlePercentPosition`	`string`	`'center'`	Title percentage position
`className`	`string`	`''`	Additional CSS classes

Basic ProgressBar

Primary ProgressBar

<Card>
  <h4 className='space-y-2'>Basic ProgressBar</h4>
  <ProgressBar value={55} className='progressbar-primary' />
  <ProgressBar value={55} className='progressbar-success' />
  <ProgressBar value={55} className='progressbar-warning' />
  <ProgressBar value={55} className='progressbar-danger' />
</Card>

With Percentage Labels

<Card>
  <h4 className='space-y-2'>ProgressBar with Labels</h4>
  <ProgressBar value={55} className='progressbar-primary' showPercent />
  <ProgressBar value={75} className='progressbar-success' showPercent />
  <ProgressBar value={45} className='progressbar-warning' showPercent />
  <ProgressBar value={90} className='progressbar-danger' showPercent />
</Card>

Color Variants

Standard Colors

<Card>
  <h4 className='space-y-2'>Color Variants</h4>
  <ProgressBar value={60} className='progressbar-primary' showPercent />
  <ProgressBar value={60} className='progressbar-secondary' showPercent />
  <ProgressBar value={60} className='progressbar-success' showPercent />
  <ProgressBar value={60} className='progressbar-info' showPercent />
  <ProgressBar value={60} className='progressbar-warning' showPercent />
  <ProgressBar value={60} className='progressbar-danger' showPercent />
  <ProgressBar value={60} className='progressbar-dark' showPercent />
  <ProgressBar value={60} className='progressbar-light' showPercent />
</Card>

Gradient Variants

<Card>
  <h4 className='space-y-2'>Gradient ProgressBar</h4>
  <ProgressBar value={70} className='gradient-primary' />
  <ProgressBar value={50} className='gradient-secondary' />
  <ProgressBar value={30} className='gradient-success' percentLabelVariant='inside' showPercent />
  <ProgressBar value={90} className='gradient-warning' />
  <ProgressBar value={60} className='gradient-danger' />
</Card>

Style Variants

Soft/Transparent ProgressBar

<Card>
  <h4 className='space-y-2'>Soft ProgressBar</h4>
  <ProgressBar value={75} className='progressbar-primary outlined transparent' />
  <ProgressBar value={75} className='progressbar-success outlined transparent' />
  <ProgressBar value={75} className='progressbar-warning outlined transparent' />
  <ProgressBar value={75} className='progressbar-danger outlined transparent' />
</Card>

Outlined ProgressBar

<Card>
  <h4 className='space-y-2'>Outlined ProgressBar</h4>
  <ProgressBar value={65} className='progressbar-primary outlined' />
  <ProgressBar value={65} className='progressbar-success outlined' />
  <ProgressBar value={65} className='progressbar-warning outlined' />
  <ProgressBar value={65} className='progressbar-danger outlined' />
</Card>

Size Variants

Different Sizes

<Card>
  <h4 className='space-y-2'>Size ProgressBar</h4>
  <ProgressBar value={60} className='progressbar-primary progressbar-sm' title='Small' />
  <ProgressBar value={60} className='progressbar-primary' title='Medium' />
  <ProgressBar value={60} className='progressbar-primary progressbar-lg' title='Large' />
</Card>

Size Examples

<Card>
  <h4 className='space-y-2'>ProgressBar Sizes</h4>
  <div className='space-y-4'>
    <div>
      <span className='text-sm text-gray-600'>Small (h-2)</span>
      <ProgressBar value={50} className='progressbar-primary progressbar-sm' />
    </div>
    <div>
      <span className='text-sm text-gray-600'>Medium (h-3) - Default</span>
      <ProgressBar value={50} className='progressbar-primary' />
    </div>
    <div>
      <span className='text-sm text-gray-600'>Large (h-4)</span>
      <ProgressBar value={50} className='progressbar-primary progressbar-lg' />
    </div>
  </div>
</Card>

Label Variants

Outside Label (Default)

<Card>
  <h4 className='space-y-2'>Outside Label</h4>
  <ProgressBar value={75} className='progressbar-primary' percentLabelVariant='outside' showPercent />
  <ProgressBar value={45} className='progressbar-success' percentLabelVariant='outside' showPercent />
  <ProgressBar value={90} className='progressbar-warning' percentLabelVariant='outside' showPercent />
</Card>

Inside Label

<Card>
  <h4 className='space-y-2'>Inside Label</h4>
  <ProgressBar value={75} className='progressbar-primary' percentLabelVariant='inside' showPercent />
  <ProgressBar value={45} className='progressbar-success' percentLabelVariant='inside' showPercent />
  <ProgressBar value={90} className='progressbar-warning' percentLabelVariant='inside' showPercent />
</Card>

Bubble Label

<Card>
  <h4 className='space-y-2'>Bubble Label</h4>
  <ProgressBar value={75} className='progressbar-primary' percentLabelVariant='bubble' showPercent />
  <ProgressBar value={45} className='progressbar-success' percentLabelVariant='bubble' showPercent />
  <ProgressBar value={90} className='progressbar-warning' percentLabelVariant='bubble' showPercent />
</Card>

Outline Label

<Card>
  <h4 className='space-y-2'>Outline Label</h4>
  <ProgressBar value={45} className='progressbar-primary' title='Project Workforce' percentLabelVariant='outline' showPercent />
  <ProgressBar value={75} className='progressbar-success' title='Task Completion' percentLabelVariant='outline' showPercent />
  <ProgressBar value={60} className='progressbar-warning' title='Resource Usage' percentLabelVariant='outline' showPercent />
</Card>

Animation Variants

Progress Animation

<Card>
  <h4 className='space-y-2'>Animated ProgressBar</h4>
  <ProgressBar value={80} className='progressbar-primary animate-progress' />
  <ProgressBar value={80} className='progressbar-primary animate-indeterminate' />
</Card>

Indeterminate Animation

<Card>
  <h4 className='space-y-2'>Indeterminate Progress</h4>
  <ProgressBar value={0} className='progressbar-primary animate-indeterminate' />
  <ProgressBar value={0} className='progressbar-success animate-indeterminate' />
  <ProgressBar value={0} className='progressbar-warning animate-indeterminate' />
</Card>

Advanced Examples

Complete ProgressBar with Title

<Card>
  <h4 className='space-y-2'>Complete ProgressBar</h4>
  <ProgressBar 
    value={75} 
    className='progressbar-primary' 
    title='Project Completion'
    showPercent 
    percentLabelVariant='inside' 
  />
</Card>

Multiple ProgressBars

<Card>
  <h4 className='space-y-2'>Multiple ProgressBars</h4>
  <div className='space-y-4'>
    <div>
      <span className='text-sm font-medium'>Frontend Development</span>
      <ProgressBar value={85} className='progressbar-primary' showPercent />
    </div>
    <div>
      <span className='text-sm font-medium'>Backend Development</span>
      <ProgressBar value={60} className='progressbar-success' showPercent />
    </div>
    <div>
      <span className='text-sm font-medium'>Testing</span>
      <ProgressBar value={45} className='progressbar-warning' showPercent />
    </div>
    <div>
      <span className='text-sm font-medium'>Deployment</span>
      <ProgressBar value={20} className='progressbar-danger' showPercent />
    </div>
  </div>
</Card>

Dashboard Progress

<Card>
  <h4 className='space-y-2'>Dashboard Progress</h4>
  <div className='grid grid-cols-2 gap-4'>
    <div className='space-y-2'>
      <span className='text-sm font-medium'>CPU Usage</span>
      <ProgressBar value={75} className='gradient-primary' showPercent />
    </div>
    <div className='space-y-2'>
      <span className='text-sm font-medium'>Memory Usage</span>
      <ProgressBar value={45} className='gradient-success' showPercent />
    </div>
    <div className='space-y-2'>
      <span className='text-sm font-medium'>Disk Usage</span>
      <ProgressBar value={90} className='gradient-warning' showPercent />
    </div>
    <div className='space-y-2'>
      <span className='text-sm font-medium'>Network</span>
      <ProgressBar value={30} className='gradient-info' showPercent />
    </div>
  </div>
</Card>

Examples

Basic ProgressBar

<Card>
  <h4 className='space-y-2'>Basic ProgressBar</h4>
  <ProgressBar value={55} className='progressbar-primary' />
  <ProgressBar value={55} className='progressbar-success' />
  <ProgressBar value={55} className='progressbar-warning' />
  <ProgressBar value={55} className='progressbar-danger' />
</Card>

Soft ProgressBar

<Card>
  <h4 className='space-y-2'>Soft ProgressBar</h4>
  <ProgressBar value={75} className='progressbar-primary outlined transparent' />
  <ProgressBar value={75} className='progressbar-success outlined transparent' />
  <ProgressBar value={75} className='progressbar-warning outlined transparent' />
  <ProgressBar value={75} className='progressbar-danger outlined transparent' />
</Card>

Animated ProgressBar

<Card>
  <h4 className='space-y-2'>Animated ProgressBar</h4>
  <ProgressBar value={80} className='progressbar-primary animate-progress' />
  <ProgressBar value={80} className='progressbar-primary animate-indeterminate' />
</Card>

Gradient ProgressBar

<Card>
  <h4 className='space-y-2'>Gradient ProgressBar</h4>
  <ProgressBar value={70} className='gradient-primary' />
  <ProgressBar value={50} className='gradient-secondary' />
  <ProgressBar value={30} className='gradient-success' percentLabelVariant='inside' showPercent />
  <ProgressBar value={90} className='gradient-warning' />
  <ProgressBar value={60} className='gradient-danger' />
</Card>

Size ProgressBar

<Card>
  <h4 className='space-y-2'>Size ProgressBar</h4>
  <ProgressBar value={60} className='progressbar-primary progressbar-sm' title='Small' />
  <ProgressBar value={60} className='progressbar-primary' title='Medium' />
  <ProgressBar value={60} className='progressbar-primary progressbar-lg' title='Large' />
</Card>

Variant ProgressBar

<Card>
  <h4 className='space-y-2'>Variant ProgressBar</h4>
  <ProgressBar value={45} className='progressbar-primary' title='Project Workforce' percentLabelVariant='outline' showPercent />
  <ProgressBar value={75} className='progressbar-primary' percentLabelVariant='outside' showPercent />
  <ProgressBar value={50} className='progressbar-primary' percentLabelVariant='inside' showPercent />
  <ProgressBar value={75} className='progressbar-primary' percentLabelVariant='bubble' showPercent />
</Card>

CSS Classes Reference

ProgressBar Container

.progressbar-container - Base container
.progressbar-track - Progress track background
.progressbar - Progress bar element

Color Variants

.progressbar-primary - Primary color (blue)
.progressbar-secondary - Secondary color (indigo)
.progressbar-success - Success color (emerald)
.progressbar-info - Info color (sky)
.progressbar-warning - Warning color (amber)
.progressbar-danger - Danger color (rose)
.progressbar-dark - Dark color (slate)
.progressbar-light - Light color (gray)

Gradient Variants

.gradient-primary - Blue to purple gradient
.gradient-secondary - Indigo to pink gradient
.gradient-success - Emerald to teal gradient
.gradient-info - Sky to cyan gradient
.gradient-warning - Amber to orange gradient
.gradient-danger - Rose to pink gradient
.gradient-dark - Slate to gray gradient
.gradient-light - Gray to white gradient

Style Modifiers

.outlined - Outlined style
.transparent - Transparent background
.glow - Glow effect

Size Classes

.progressbar-sm - Small size (h-2)
.progressbar-md - Medium size (h-3) - Default
.progressbar-lg - Large size (h-4)

Animation Classes

.animate-progress - Progress animation
.animate-indeterminate - Indeterminate animation

Label Classes

.progressbar-percent-label-outside - Outside label styling
.progressbar-percent-label-inside - Inside label styling
.progressbar-label-bubble - Bubble label styling
.progressbar-title - Title styling

Styling

The ProgressBar component uses Tailwind CSS classes and includes:

Flexible Sizing: Customizable height and width
Color Variants: 8 standard colors and 8 gradient variants
Animation Support: Progress and indeterminate animations
Dark Mode: Automatic dark mode variants
Responsive Design: Works on all screen sizes
Smooth Transitions: CSS transitions for value changes
Label Positioning: Multiple label position options

Accessibility

The ProgressBar component includes accessibility features:

ARIA Attributes: Proper role and aria-valuenow attributes
Screen Reader Support: Meaningful labels and descriptions
Keyboard Navigation: Focus indicators
Color Contrast: Proper contrast ratios
Semantic HTML: Proper HTML structure

Best Practices

Use appropriate colors for different progress states
Provide meaningful titles for better context
Consider animation preferences for users
Use consistent sizing across your application
Include percentage labels for precise information
Test with screen readers for accessibility compliance

Common Use Cases

File uploads: Show upload progress
Form completion: Display form completion status
Task progress: Show task completion percentage
System metrics: Display CPU, memory, disk usage
Download progress: Show download completion
Process workflows: Display multi-step process progress

Card - Often used as a container for progress bar examples
Button - For triggering progress updates
Badges - For displaying status alongside progress
Alert - For showing progress-related messages

Overview​

Basic Usage​

Props​

Basic ProgressBar​

Primary ProgressBar​

With Percentage Labels​

Color Variants​

Standard Colors​

Gradient Variants​

Style Variants​

Soft/Transparent ProgressBar​

Outlined ProgressBar​

Size Variants​

Different Sizes​

Size Examples​

Label Variants​

Outside Label (Default)​

Inside Label​

Bubble Label​

Outline Label​

Animation Variants​

Progress Animation​

Indeterminate Animation​

Advanced Examples​

Complete ProgressBar with Title​

Multiple ProgressBars​

Dashboard Progress​

Examples​

Basic ProgressBar​

Soft ProgressBar​

Animated ProgressBar​

Gradient ProgressBar​

Size ProgressBar​

Variant ProgressBar​

CSS Classes Reference​

ProgressBar Container​

Color Variants​

Gradient Variants​

Style Modifiers​

Size Classes​

Animation Classes​

Label Classes​

Styling​

Accessibility​

Best Practices​

Common Use Cases​

Related Components​

Overview

Basic Usage

Props

Basic ProgressBar

Primary ProgressBar

With Percentage Labels

Color Variants

Standard Colors

Gradient Variants

Style Variants

Soft/Transparent ProgressBar

Outlined ProgressBar

Size Variants

Different Sizes

Size Examples

Label Variants

Outside Label (Default)

Inside Label

Bubble Label

Outline Label

Animation Variants

Progress Animation

Indeterminate Animation

Advanced Examples

Complete ProgressBar with Title

Multiple ProgressBars

Dashboard Progress

Examples

Basic ProgressBar

Soft ProgressBar

Animated ProgressBar

Gradient ProgressBar

Size ProgressBar

Variant ProgressBar

CSS Classes Reference

ProgressBar Container

Color Variants

Gradient Variants

Style Modifiers

Size Classes

Animation Classes

Label Classes

Styling

Accessibility

Best Practices

Common Use Cases

Related Components