Bugcrowd Design System

Bugcrowd Design System

Search/

Progress Bars

Last modified:

A horizontal bar that displays the progression of a task or activity.

Back to top

Variants

Example of Progress Bars - default

React documentation

Last modified:

BcProgressBar props

PropTypeRequired?DefaultDescription
valuenumberrequiredA number between 0 to 100 that denotes the percentage of progress completed.
ℹ️ You will need to implement your own logic in the parent component.
colorstringoptionalN/A (blue)Changes color to either success or branded (orange).
See ProgressBar colors.
isInlinebooleanoptionalfalseControls whether the Output component is rendered inline with the progress bar.
labelPlacementstringoptionalControls where the progress bar label is rendered above or below the progress bar itself. Either of top or bottom.
sizestringoptionalChanges bar height/thickness. One of xs, sm, or lg.
See ProgressBar sizes.

Any other props will be passed to .bc-progress-bar__bar div element.

If the current value cannot be accurately communicated as a number, use aria-valuetext.

Possible values for color props

Default color for the progress bar will use $bc-palette-primary-horizon-blue color variable.

ValueDescription
successChanges the color of the progress bar to use $bc-color-success.
brandedChanges the color of the progress bar to use $bc-palette-primary-bug-orange.

Possible values for size prop

ValueDescription
Default height of progress bar is 0.875 rem.
xsSets the thickness of progress bar to extra small with height of 0.375 rem.
smSets the thickness of progress bar to small with height of 0.5 rem.
lgSets the thickness of progress bar to large with height of 1 rem.

Any extended types: NA

BcProgressBar.Label props

BcProgressBar.Label is required to render BcProgressBar.Output properly.

Any extended types: HTMLAttributes<HTMLSpanElement>.

BcProgressBar.Output props

BcProgressBar.Output is the component to render an output element. It must be wrapped with BcProgressBar.Label to render as per the design system.

PropTypeRequired?DefaultDescription
valuestringrequiredValue will be wrapped inside an output element.

Any extended types: HTMLAttributes<HTMLOutputElement> except children.

HTML

Last modified:

The current value is communicated in two main ways:

  1. Graphically by updating the inline style that sets bar’s width as a percentage
  2. With ARIA markup using aria-valuenow, and optionally --- in addition --- aria-valuetext

If the current value cannot be accurately communicated as a number, use aria-valuetext in addition to aria-valuenow.

If desired, the current value can also be displayed with the progress bar as an <output>. When doing this, establish a labelling relationship between the .bc-progress-bar and the <output> using aria-labelledby. When providing additional labelling or context, wrap only the current value inside the <output> tag.

If the text value is omitted, you can use aria-label instead to provide additional context.

  • Use .bc-progress-bar__output to display a label text above or below the progress bar.
  • Use .bc-helper-righttext to right align the label text.
  • Use .bc-helper-centeredtext to center align the label text.

Design

Last modified:

These are the color, sizing, and layout variants:

VariantPurpose
.bc-progress-bar--successChanges the progression color to green (success).
.bc-progress-bar--brandedChanges the progression color to bugcrowd’s brand (orange).
.bc-progress-bar--xsLowers the height (extra-small) of the progress bar.
.bc-progress-bar--smLowers the height of the progress bar.
.bc-progress-bar--lgIncreases the height of the progress bar.
.bc-progress-bar--inlineAligns the progress bar and label text horizontally.

Accessibility

Last modified:

  • The progressbar role provides context to the markup used
  • The range is provided by aria-valuemin and aria-valuemax
  • The current value is specified using aria-valuenow (assistive technologies render this value as a percentage between aria-valuemin and aria-valuemax)
  • More context to the value can be given using aria-valuetext --- to be used in addition to aria-valuenow --- when merely providing the current value as a percentage is inadequate to communicate context
  • Further context via an ARIA label can be given, using one of the following methods:
    1. If providing a visual text completion value, use aria-labelledby to directly reference the <output> text (.bc-progress-bar__output) via its ID
    2. When not providing a visual <output>, pass the same [human-readable] string as the aria-label

Rationale

Last modified:

Progress bars are an intuitive visual graphing pattern for representing the completion of a process as a percentage.

Markup decision: We’re intentionally not using HTML5’s native <progress> because at time of creation <progress> wasn’t supported by some browsers in our browser support matrix, and more importantly the ARIA implementation has better screen reader support (see also Accessibility and HTML sections).

See also

Last modified: