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

Examples

Code

To get an initial progress bar simply include the markup.

To update the progress bar you can call the update method:

AخA
 
<div id="some-id" class="aui-progress-indicator">
    <span class="aui-progress-indicator-value"></span>
</div>
 
AJS.progressBars.update("#some-id", 0.2);

Options

All progress indicator functions are called from the global object AJS.progressBars

Function Arguments Description Example Usage
update 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
 
AJS.progressBars.update("progress-bar-id", 0.4);
setIndeterminate 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.
 
AJS.progressBars.setIndeterminate("progress-bar-id");