Progress indicator

Ask a question Design guidelines

Summary

Progress indicators inform users that a system process is currently taking place that takes a predictable amount of time before it is finished.

Status

API status:	general
Included in AUI core?	Not in core You must explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-progress-indicator`
AMD Module key:	N/A
Experimental since:	5.2
General API status:	5.8
Web component since:	7.7

Examples

Usage

To get an initial progress bar, simply add an aui-progressbar element to your page. You can adjust the current value and maximum value using either attributes or properties.

Behaviour

When the indeterminate state is set, the user will be notified that progress cannot be described in numeric terms. When unset, the progress bar will return to its previously set values.

Toggle

API reference

aui-progressbar
Name	Attribute	Property	Type	Default	Description
`max`	is an attribute	is a property	Number	`1`	An integer or floating point number for the largest number allowed in `value`.
`value`	is an attribute	is a property	Number	`0`	An integer or floating point number representing the current progress. The value will be conveyed to the user as a percentage of the `max` value, both visually and in assistive devices.
`indeterminate`	is an attribute	is a property	Boolean	`false`	Set to `true` to convey that the current progress cannot be determined at this point in time.

AJS.progressBars Deprecated

An imperative API exists to update static progress bar HTML. In almost every case, the web component API is simpler, and should be the preferred method of using this component going forward.

Function Arguments Description Example Usage

Function	Arguments	Description	Example Usage
update Deprecated	element, value	updates the specified progress bar to the specified value. The element argument can be either a jQuery object a selector string or a javascript node. The value must be between 0 and 1 Important note: do not add the `data-value` attribute to your markup manually, otherwise the progress bar will not visually fill up to the expected amount.
setIndeterminate Deprecated	element	Sets a determinate progress bar back to its indeterminate state. NOTE: This will lose any progress on the progress bar. To retain the current progress you can read the 'data-value' attribute on the DOM Element.

update Deprecated

element, value

updates the specified progress bar to the specified value.

The element argument can be either a jQuery object a selector string or a javascript node.
The value must be between 0 and 1

Important note: do not add the data-value attribute to your markup manually, otherwise the progress bar will not visually fill up to the expected amount.

setIndeterminate Deprecated element Sets a determinate progress bar back to its indeterminate state. NOTE: This will lose any progress on the progress bar. To retain the current progress you can read the 'data-value' attribute on the DOM Element.