Spinner

Ask a question Design guidelines

Summary

An optional component providing spin.js, a highly customisable javascript spinner. Note this is a separate component from the simple wait icon included in AUI Icons.

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

Examples

Code

AخA
 
<button class="aui-button" id="spinner-trigger">Do Something</button>
<div class="button-spinner"></div>
 
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;
        }
    });
});

What Spinner does

Spinner will append:

 
<div class="spinner"></div>
...

Inside the specified target element on .spin() and remove it on .spinStop().