Summary

Spinners are used for showing a system process of unknown length going on that ends with the system displaying results to the user.

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-spinner
AMD Module key: N/A
Experimental API: 5.1
General API: 5.8
Web Component API: 7.7

Examples

Normal spinner

AUI's spinner is just an HTML element. Add it to wherever you need to indicate progress is being made.

Filled spinner

If you need a spinner to fit in the middle of a containing element, add a filled attribute to the spinner element.

Spinners in buttons

You can add a spinner to an AUI Button by setting the button's busy property to true.

HTML API

aui-spinner
Name Attribute Property Type Default Description
size is an attribute is a property Enum medium An Enum which provides size of the spinner.
Possible values are: small(20px), medium(30px) and large(50px).
filled is an attribute is a property Boolean false A Boolean which changes behavior of the spinner.
When present, the spinner element will be placed in the middle of the parent element and have a width and height of zero.

JavaScript API Deprecated

There are two jQuery functions available you can call on an element to add and remove a filled spinner.

Calling AJS.$(element).spin() will append the following spinner to element:

Calling AJS.$(element).spinStop() will remove the spinner element.