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.

Spinners in buttons

Spinners are integrated in to AUI buttons for you.

Spinners in toggles

Spinners are integrated in to AUI toggles.

Positioning spinners inside other components

As a discrete HTML element, spinners can be positioned by adding CSS to the spinner's parent element.

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