Spinners

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:	experimental
Included in AUI core?	Not in core You must explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-experimental-spinner`
Experimental since:	5.1

Examples

Code


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

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