Progress

Components

Progress

Code

Progress displays the progress of a task or the proportion of a value within a range.

Progress is built on Radix UI Progress and provides full accessibility support with role="progressbar" and appropriate ARIA attributes.

An aria-label or aria-labelledby is required so screen readers can identify what the progress bar represents.

import { Progress } from '@sproutsocial/racine'

<Progress value={33} aria-label="Credits remaining" />

Custom max value

Use the max prop to set a custom maximum value.

import { Progress } from '@sproutsocial/racine'

<Progress value={3} max={10} aria-label="Steps completed" />

Custom value label

Use getValueLabel to provide a human-readable value for screen readers.

import { Progress } from '@sproutsocial/racine'

<Progress
  value={3}
  max={10}
  aria-label="Steps completed"
  getValueLabel={(value, max) => `${value} of ${max} steps completed`}
/>

Custom indicator style

Use indicatorStyle to override the fill appearance, for example with a gradient.

import { Progress } from '@sproutsocial/racine'

<Progress
  value={67}
  aria-label="Trellis credits remaining"
  indicatorStyle={{
    background: `radial-gradient(
      ellipse at left,
      rgba(32, 91, 195, 1) 0%,
      rgba(62, 86, 210, 1) 15%,
      rgba(92, 81, 225, 1) 30%,
      rgba(151, 71, 255, 1) 61%,
      rgba(197, 101, 250, 1) 80%,
      rgba(242, 130, 245, 1) 100%
    )`,
  }}
/>

Properties

Name	Type	Default	Description
`value`	`number`		The current progress value
`max`	`number`	`100`	The maximum progress value. Defaults to 100
`getValueLabel`	`(value: number, max: number) => string`		A function to get the accessible label text representing the current value. Defaults to "{value}%"
`indicatorStyle`	`React.CSSProperties`		Custom CSS for the indicator (fill) element, e.g. a gradient background