Documentation

Progress indicator

Code snippetsDesign 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:experimental
Included in AUI core?Not in core You must explicitly require the web resource key.
Web resource key:com.atlassian.auiplugin:aui-experimental-progress-indicator
Experimental since:5.2

Examples

Code

To get an initial progress bar simply include the markup

<div "some-id" class="aui-progress-indicator">
    <span class="aui-progress-indicator-value"></span>
</div>

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

AJS.progressBars.update("#some-id", 0.2);

Options

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

FunctionArgumentsDescriptionExample Usage
updateelement, valueupdates 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);
setIndeterminateelement Sets a determinate progress bar back to it's 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");