Progress bar

This component doesn't include a label or heading. Text nearby should describe its status.

<bolt-progress-bar value="30"></bolt-progress-bar>

This component includes descriptive arialabel parameters when there is no text nearby to describe its status.

<bolt-progress-bar value="50" arialabel="50% progress"></bolt-progress-bar>

The bolt-progress-bar component creates a visual progress bar. It should be captioned or titled outside of the component.

The component accepts the following parameters:

• value (required)
  • The amount the progress bar is filled.
  • If this is changed programmatically, the component displays a brief animation while transitioning to the new value.
  • type: Number (0-100)
• arialabel (optional)
  • Sets the aria-label attribute of the underlying <svg> element.
  • type: String

• A Progress bar informs users of advancement in a multi-step process with pre-determined steps.
• The width of a Progress bar should be bound within the width of the page's content container.
• Ensure the Progress bar is only completely filled when users reach the last step of a process.
• A Progress bar should not be broken up into sections to represent the number of steps; it should be one contained unit.
• When possible, animate the Progress bar from the previous step to the current step.
• The page's title should update with each page/step in the process. This acts as a "step label" for the progress bar; other step labels and numbers are not advised.

• When dealing with long, multi-step flows.
• When representing a percentage of completion.
• For workflows, multi-paged forms or questionnaires with greater than 3 linear steps.
• For workflows with non-experts completing first-time or infrequent tasks.
• For complex processes that benefit from being broken down into smaller tasks.

• Avoid marking time units with a Progress bar.
• Progress bars should not be used in disabled UI areas or panels.
• Avoid for processes with fewer than 3 steps.
• Avoid Progress bars for non-linear workflows.

• Use Waiting indicator for content loading.
• Consider an alternate pattern when desiring an experience outside of a flow where users can track the status of something or check milestones.

• Use screen content for setting expectations about the typical completion time.
• Use the page title to label the current step of a process.
• Do not include the current step number or the number of steps expected to complete a process; user input may change the actual number of required steps at any time.

• Utilize the built in arialabel parameters to inform screen reader users of the current step in the process, especially when there is no text nearby to describe its status.
• Limit the use of multiple Progress bars within a page or screen to prevent confusion for screen reader users and those with cognitive disabilities. If multiple Progress bars or indicators are necessary, ensure each one is clearly labeled (using arialabel parameter) with detailed and descriptive information.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.