spin.js example

An example of how to use spin.js .

HTML

<script src="http://fgnass.github.io/spin.js/spin.min.js"></script>
<button id="startSpin">Start Spinning</button>
<br/>
<button id="stopSpin">Stop Spinning</button>
<br/>

CSS

@keyframes spinner-line-fade-more {
  0%, 100% {
    opacity: 0; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-quick {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-default {
  0%, 100% {
    opacity: 0.22; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    // set up references
    var startSpinElem = document.querySelector("#startSpin");
    var stopSpinElem = document.querySelector("#stopSpin");
    // set up spinner
    var opts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: '#000', // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: 'spinner', // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: '50%', // Top position relative to parent
        left: '50%' // Left position relative to parent
    };
    var target = document.body;
    var spinner = new Spinner(opts);

    // attach event handlers
    startSpinElem.addEventListener('click',

    function (evt) {
        spinner.spin(target);
    });

    // attach event handlers
    stopSpinElem.addEventListener('click',

    function (evt) {
        spinner.stop();
    });
    // code…
});