Progress bar

Usage

The progress bar component is used to visually represent the completion of a task or operation, for example when waiting for a process to complete. Progress bar can show how much of the task has been completed and how much is still left. It can also show a visual representation of a value in percentages or discrete numbers.

Progress bar can span the full width of the container where it is placed, or can have a specific width. Additional text labels can be set next to the progress bar to better explain the value.

Behaviour

• Progress bar should consist of the track that shows the total value, and the coloured area that shows current value in the process

• The value of the progress bar is read-only and not directly editable

Best Practices

• Use the progress bar to show users how much of the task has completed and how much is left

• Use the progress bar to represent the value compared to a total value, in percentage or discrete numbers

• Do not use progress bar for page or content loads; use Loader component instead

• Progress bar can have context-specific colours, just be sure to follow brand colour guidelines when using them

Style

The progress bar component comes in one size and style, where the colours can be used to accommodate contextual project needs

Color Application

Different track and progress colour backgrounds can be applied if it is needed to convey the basic system statuses.