Spinner

Ask a question Design guidelines

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.

Example
Small spinner
Medium spinner
Large spinner
​x
 
<h5>Small spinner</h5>
<aui-spinner size="small"></aui-spinner>
​
<h5>Medium spinner</h5>
<aui-spinner size="medium"></aui-spinner>
​
<h5>Large spinner</h5>
<aui-spinner size="large"></aui-spinner>

Filled spinner

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

Example
Filled
Not Filled
 
<style>
    .aui-test-spinner-container {
        width: 120px;
        height: 100px;
        margin: 10px;
        display: inline-block;
        border: 1px solid grey;
    }
</style>
<h5>Filled</h5>
<div class="aui-test-spinner-container">
    <aui-spinner size="small" filled></aui-spinner>
</div>
<div class="aui-test-spinner-container">
    <aui-spinner size="medium" filled></aui-spinner>
</div>
<div class="aui-test-spinner-container">
    <aui-spinner size="large" filled></aui-spinner>
</div>
​
<h5>Not Filled</h5>
<div class="aui-test-spinner-container">
    <aui-spinner></aui-spinner>
</div>

Spinners in buttons

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

Example
 
<button class="aui-button" id="button-spin-1">Do Something</button>
<button class="aui-button aui-button-primary" id="button-spin-2">Do Something</button>
 
AJS.$(function() {
    AJS.$('#button-spin-1, #button-spin-2').click(function() {
        if (!this.isBusy()) {
            this.setAttribute('aria-disabled', 'true');
            this.busy();
​
            var that = this;
            setTimeout(function() {
                that.setAttribute('aria-disabled', 'false');
                that.idle();
            }, 2000);
        }
    });
});

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.

Example
 
<button class="aui-button" id="spinner-trigger">Do Something</button>
<span class="button-spinner" style="display: inline-block; height: 10px; width: 20px"></span>
 
AJS.$(function() {
    var spinning = false;
    AJS.$('#spinner-trigger').on('click', function() {
        if (!spinning) {
            AJS.$(this).text('Stop Spinning!');
            AJS.$('.button-spinner').spin();
            spinning = true;
        } else {
            AJS.$(this).text('Do Something');
            AJS.$('.button-spinner').spinStop();
            spinning = false;
        }
    });
});

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

 
<aui-spinner size="small" filled></aui-spinner>

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