Progress bar

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

Example usage

{{
    html.progress({
        "value": 25
    })
}}

See the Pen docs - html - progress bar by Pulsar (@pulsar) on CodePen.

Options

Option	Type	Description
class	string	CSS classes, space separated
id	string	A unique identifier, if required
label	string	Text to display inside the progress bar
value	int	The percentage value of the progress bar
value_visible	bool	Whether to visually display the value inside the bar (default `false`)
data-*	string	Data attributes, eg: `'data-foo': 'bar'`

State Variations

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

See the Pen docs - html - progress bar default by Pulsar (@pulsar) on CodePen.

.progress-bar--warning

See the Pen docs - html - progress bar warning by Pulsar (@pulsar) on CodePen.

.progress-bar--danger

See the Pen docs - html - progress bar danger by Pulsar (@pulsar) on CodePen.

.progress-bar--success

See the Pen docs - html - progress bar success by Pulsar (@pulsar) on CodePen.

Additional styles

.progress-bar--compact

Use where space is limited, like table rows or dropdown menus.

See the Pen docs - html - progress bar compact by Pulsar (@pulsar) on CodePen.

Updating progress with javascript

Given the markup example below, it's simply a case of updating the two main percentage values in aria-valuenow and the inline style attributes with your new percentage.

If you have the percentage in the label either hidden or visible) then you'll need to update that too.

<div class="progress">
    <div 
        class="progress-bar" 
        role="progressbar" 
        aria-valuenow="25" 
        aria-valuemin="0" 
        aria-valuemax="100" 
        style="width: 25%;"
    >
        25%
    </div>
</div>

Progress