Skip to main content

Progress Bar

Supported products
  • Central CMS
  • Central Forms
  • Central Connect

Provide up-to-date feedback on the progress of a workflow or action with simple progress bars.

25%

Basic usage

{{
html.progress({
'value': 25,
'aria-label': 'File upload progress'
})
}}

Helper options

You can configure this helper using the common helper options, the following options are specific to this helper.

OptionTypeDescription
labelstringAn optional text label to display inside the progress bar
valueintegerThe percentage value of the progress bar (without the % symbol)
value_visibleboolIf true, shows the value percentage (with % symbol) in the progress bar

Accessibility

To ensure screen readers users are able to discern the purpose of elements with role="progressbar" an accessible name must be used. This can be via aria-label or if another visible element exists as a title for the progress bar, aria-labelledby.

Updating progress with JavaScript

Given the rendered markup example below, you’ll need to write code to update the two main percentage values in aria-valuenow and the inline style attribute with your new percentage. If you have the percentage in the label either hidden or visible then you’ll need to update that too.

You should also add a live region to the DOM, which your code updates to communicate progress updates to screen reader users.

For example: when loading <span id="progress-live-region" class="hide" aria-live="polite">23%</span> and when completed <span id="progress-live-region" class="hide" aria-live="polite">loading complete</span>.

25%

25%
<div className="progress">
<div
className="progress-bar"
role="progressbar"
aria-label="File upload progress"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100"
style={{'width': '25%'}}
>
25%
</div>
</div>
<span id="progress-live-region" className="hide" aria-live="polite">25%</span>

States

Use the common state variation classes to help communicate progress, or lack of it. Showing visible labels can help to show the precise progress or show other relevant updates.

Base

25%
{{
html.progress({
'value': 25,
'aria-label': 'File upload progress'
})
}}
25%
{{
html.progress({
'value': 25,
'aria-label': 'File upload progress'
})
}}

Warning

33% Having trouble connecting…
{{
html.progress({
'label': 'Having trouble connecting&hellip;',
'aria-label': 'File upload progress',
'value': 33,
'value_visible': true,
'class': 'progress-bar--warning'
})
}}

Danger

75% Upload failed
{{
html.progress({
'label': 'Upload failed ' ~ html.icon('warning-sign'),
'aria-label': 'File upload progress',
'value': 75,
'class': 'progress-bar--danger'
})
}}

Success

100% Uploaded

{{
html.progress({
'label': 'Uploaded ' ~ html.icon('ok'),
'aria-label': 'File upload progress',
'value': 100,
'class': 'progress-bar--success'
})
}}