Progress indicator

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 API: 5.2
General API: 5.8
Web Component API: 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.

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
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.