The React documentation for this component can be read from Storybook (link here)

Progress

Use to display the progress of a task or to represent advancement towards a total.

Description

Context:

This component can sit within other components, it runs full width of the space it occupies.

Behaviour:

  • The speed of progress is determined by the task.
  • The indicator should always fill from 0% to 100%, in instances where progress has been made off view, the active progress should be animated from left to right.

Elements:

  • .progress: This is the main element in which indicates the length of the progress to complete.
    • .is-complete: This is the state class which indicates when the progress bar is complete. This is to be applied to any ancestor of the .progress element or the .progress element itself.
  • .progress__activity: This is the element which represents the current progress of the activity. This is where you apply an inline width (style="width: 50%;") to represent the progress.

Use the input to test the progress bar:

%

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-progress;

Usage

Usage example


Code example

<div class="progress">
  <div class="progress__activity" style="width: 50%;"></div>
</div>
<br>
<div class="progress progress--green">
  <div class="progress__activity" style="width: 50%;"></div>
</div>