Components

Progress

Live examples of progress component.

Usage

<Progress
  maxValue={100}
  values={[
    { value: 50, color: 'green', label: 'Donations' },
    { value: 20, color: 'orange', label: 'Sponsorship' }
  ]}
/>

Values

Each object inside value array should have this structure:

{
  value: 50, // Numeric value
  color: 'green', // Any valid CSS color HEX, RGBA, HSLA, etc.
  label: 'Spel online' // Readable label for screen readers
}

Properties

Progress

Prop name	Type	Description
className	string	Add custom class
maxValue *	number	Max Value of the progress bar.
values *	arrayOf	Values for the progress bar with colors and label for each value. For the color string any css valid value is ok. i.e 'green' or '#00ff00' or rgba(0, 255, 0, 1). The label is used for screen readers and should be a human readable string.

Accessibility

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines.

Additional information regarding accessibility of this component below.

• Uses role="progressbar" for screen reader support.
• Includes aria-valuemin, aria-valuemax, and aria-valuenow for better context.
• Hidden screen-reader text provides meaningful descriptions.