Spinner

by willtx

HTML

<button id="btnPerformSave">Make Call</button>

<style type="text/css">
  .spinner {
    position: fixed;
    left: 50%;
    top: 40px;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    z-index: 99999999;
  }
</style>

<div id="spinnerContainer" class="spinner">
</div>

JavaScript

//fgnass.github.com/spin.js#v1.2.5
(function(a, b, c) {
    function g(a, c) {
        var d = b.createElement(a || "div"),
            e;
        for (e in c) d[e] = c[e];
        return d
    }
    function h(a) {
        for (var b = 1, c = arguments.length; b < c; b++) a.appendChild(arguments[b]);
        return a
    }
    function j(a, b, c, d) {
        var g = ["opacity", b, ~~ (a * 100), c, d].join("-"),
            h = .01 + c / d * 100,
            j = Math.max(1 - (1 - a) / b * (100 - h), a),
            k = f.substring(0, f.indexOf("Animation")).toLowerCase(),
            l = k && "-" + k + "-" || "";
        return e[g] || (i.insertRule("@" + l + "keyframes " + g + "{" + "0%{opacity:" + j + "}" + h + "%{opacity:" + a + "}" + (h + .01) + "%{opacity:1}" + (h + b) % 100 + "%{opacity:" + a + "}" + "100%{opacity:" + j + "}" + "}", 0), e[g] = 1), g
    }
    function k(a, b) {
        var e = a.style,
            f, g;
        if (e[b] !== c) return b;
        b = b.charAt(0).toUpperCase() + b.slice(1);
        for (g = 0; g < d.length; g++) {
            f = d[g] + b;
            if (e[f] !== c) return f
        }
    }
    function l(a, b) {
        for (var c in b) a.style[k(a, c) || c] = b[c];
        return a
    }
    function m(a) {
        for (var b = 1; b < arguments.length; b++) {
            var d = arguments[b];
            for (var e in d) a[e] === c && (a[e] = d[e])
        }
        return a
    }
    function n(a) {
        var b = {
            x: a.offsetLeft,
            y: a.offsetTop
        };
        while (a = a.offsetParent) b.x += a.offsetLeft, b.y += a.offsetTop;
        return b
    }
    var d = ["webkit", "Moz", "ms", "O"],
        e = {},
        f, i = function() {
            var a = g("style");
            return h(b.getElementsByTagName("head")[0], a), a.sheet || a.styleSheet
        }(),
        o = {
            lines: 12,
            length: 7,
            width: 5,
            radius: 10,
            rotate: 0,
    ...