Spinner

Ask a question Design guidelines

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

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 since:	5.1
General API status:	5.8
Web component since:	7.7

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

Small spinner:Medium spinner:Large spinner:

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

.aui-test-spinner-container { width: 120px; height: 100px; margin: 10px; display: inline-block; border: 1px solid grey; } Filled:

Not Filled:

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

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.

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.