Skip to main content

​
Import

import { ProgressBar } from '@adoptaunabuelo/react-components';

​
Usage

<ProgressBar
  progress={75}
  showPercentage
  animationTime={1.5}
/>

​
Props

​
progress
number | Array<{ value: number; color?: string }>
required
Current progress value or array of multiple progress values with optional colors
​
minValue
number
Minimum value for progress calculation (default: 0)
​
maxValue
number
Maximum value for progress calculation (default: 100)
​
color
string
Bar color (overrides default primary color)
​
animationTime
number
Animation duration in seconds
​
animationDelay
number
Delay in seconds before animation starts
​
showPercentage
boolean
Display percentage badge above progress bar
​
style
React.CSSProperties
Custom styles for the container

​
Features

  • Smoothly transitions to new values with configurable animation timing
  • Supports single or multiple progress indicators
  • Optional percentage display that follows the progress position
  • Customizable colors per progress value
  • Default height of 6px (customizable via style prop)

​
Examples

​
Basic Progress Bar

<ProgressBar progress={65} />

​
With Percentage Display

<ProgressBar
  progress={80}
  showPercentage
  color="#08A85B"
/>

​
Multiple Progress Values

<ProgressBar
  progress={[
    { value: 30, color: '#008FF5' },
    { value: 50, color: '#FFAA47' }
  ]}
  showPercentage
/>

​
With Animation

<ProgressBar
  progress={progress}
  animationTime={2}
  animationDelay={0.5}
  showPercentage
/>

Build docs developers (and LLMs) love

Get started for freeTalk to us