Spinner

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

<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.$(document).on('click', '#button-spin-1, #button-spin-2', function() {

    var that = this;

    if (!that.isBusy()) {

        that.busy();

​

        setTimeout(function() {

            that.idle();

        }, 2000);

    }

});

var toggle = document.getElementById('wifi-toggle');

toggle.addEventListener('change', function(e) {

    var isChecked = toggle.checked;     // new value of the toggle

    toggle.busy = true;

    $.post('set/my/variable', { value: isChecked })

        .done(function () {

            console.log('success');

        })

        .fail(function () {

            toggle.checked = !isChecked;

            console.error('display an error message');

        })

        .always(function () {

            toggle.busy = false;

        });

});

<div id="search-area-example" class="custom-card-style">

    <p>Loading results...</p>

    <aui-spinner size="large"></aui-spinner>

</div>

#search-area-example {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

​

#search-area-example aui-spinner {

    margin: 1em;

}

​

.custom-card-style {

    border-radius: 3px;

    box-shadow:

        0 1px 1px rgba(9, 30, 66, 0.25),

        0 0 1px 0 rgba(9, 30, 66, 0.31);

    margin: 0 auto;

    padding: 10px;

    width: 20em;

}

<nav class="aui-header" role="navigation" id="custom-spinner-example">

    <div class="aui-nav-secondary">

        <ul class="aui-nav">

            <li>

                <form class="aui-quicksearch" method="post" action="/foo">

                    <label class="assistive" for="quicksearchid">Text search</label>

                    <input type="text" name="quicksearchname" placeholder="Type to see a spinner" class="search" id="quicksearchid">

                </form>

            </li>

        </ul>

    </div>

</nav>

#custom-spinner-example .aui-quicksearch input {

    width: 20em;

}

#custom-spinner-example .aui-quicksearch.custom-quicksearch-indicator::after {

    display: none;

}

#custom-spinner-example .aui-quicksearch.custom-quicksearch-indicator aui-spinner {

    color: inherit;

    position: absolute;

    right: 20px;

}

(function() {

    var spinner = document.createElement('aui-spinner');

    spinner.setAttribute('size', 'small');

​

    function startSearching() {

        var $container = AJS.$('.aui-quicksearch');

        $container.addClass('custom-quicksearch-indicator');

        $container.append(spinner);

​

        return function stop() {

            $container.removeClass('custom-quicksearch-indicator');

            $container.find(spinner).remove();

        }

    }

​

    var searchTimeout = null;

    AJS.$(document).on('input', '#quicksearchid', function(e) {

        var stopSearching = startSearching();

        clearTimeout(searchTimeout);

        searchTimeout = setTimeout(stopSearching, 2000);

    });

​

    AJS.$(document).on('submit', '.aui-quicksearch', function(e) {

        e.preventDefault();

    });

}());

<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;

        }

    });

});