JSFiddle - React, Tailwind, and code Playground

UI spinner effect For Bootstrap 3

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row text-center">
  <h1>UI spinner effect For Bootstrap 3</h1>
  <p>Original idea by <a href="http://twitter.com/hakimel">@hakimel</a>, Bootstrap 3 adaptation by <a href="http://twitter.com/hakimel">Bootsnipp</a> creator, <a href="http://twitter.com/msurguy">@msurguy</a></p>
  <p> See the source and usage info <a href="https://github.com/msurguy/ladda-bootstrap">on Github</a></p>
</div>

<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center">
					<p>
						<button class="btn btn-primary ladda-button" data-style="expand-left"><span class="ladda-label">expand-left</span></button>

						<button class="btn btn-primary ladda-button" data-style="expand-right"><span class="ladda-label">expand-right</span></button>

						<button class="btn btn-primary ladda-button" data-style="expand-up"><span class="ladda-label">expand-up</span></button>

						<button class="btn btn-primary ladda-button" data-style="expand-down"><span class="ladda-label">expand-down</span></button>
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center">
					<p>
						<button class="btn btn-info ladda-button" data-style="zoom-in"><span class="ladda-label">zoom-in</span></button>

						<button class="btn btn-info ladda-button" data-style="zoom-out"><span class="ladda-label">zoom-out</span></button>
					</p>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6 col-md-offset-3 text-center">
					<p>
						<button class="btn btn-warning ladda-button" data-style="slide-left"><span class="ladda-label">slide-left</span></button>

						<button class="btn btn-warning ladda-button" data-style="slide-right"><span class="ladda-label">slide-right</span></button>

						<button class="btn btn-warning ladda-button" data-style="slide-up"><span...

CSS

.ladda-button {
    position:relative
}
.ladda-button .ladda-spinner {
    position:absolute;
    z-index:2;
    display:inline-block;
    width:32px;
    height:32px;
    top:50%;
    margin-top:-16px;
    opacity:0;
    pointer-events:none
}
.ladda-button .ladda-label {
    position:relative;
    z-index:3
}
.ladda-button .ladda-progress {
    position:absolute;
    width:0;
    height:100%;
    left:0;
    top:0;
    background:rgba(0, 0, 0, 0.2);
    visibility:hidden;
    opacity:0;
    -webkit-transition:0.1s linear all !important;
    -moz-transition:0.1s linear all !important;
    -ms-transition:0.1s linear all !important;
    -o-transition:0.1s linear all !important;
    transition:0.1s linear all !important
}
.ladda-button[data-loading] .ladda-progress {
    opacity:1;
    visibility:visible
}
.ladda-button, .ladda-button .ladda-spinner, .ladda-button .ladda-label {
    -webkit-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -moz-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -ms-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    -o-transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
    transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important
}
.ladda-button[data-style=zoom-in], .ladda-button[data-style=zoom-in] .ladda-spinner, .ladda-button[data-style=zoom-in] .ladda-label, .ladda-button[data-style=zoom-out], .ladda-button[data-style=zoom-out] .ladda-spinner, .ladda-button[data-style=zoom-out] .ladda-label {
    -webkit-transition:0.3s ease all !important;
    -moz-transition:0.3s ease all !important;
    -ms-transition:0.3s ease all !important;
    -o-transition:0.3s ease all !important;
    transition:0.3s ease all !important
}
.ladda-button[data-style=expand-right] .ladda-spinner {
    right:14px
}
.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner, .ladda-button[data-style=expand-right][data-size="xs"]...

JavaScript

/*!
 * Copyright (c) 2011-2013 Felix Gnass
 * Licensed under the MIT license
 */
(function (t, e) {
    "object" == typeof exports ? module.exports = e() : "function" == typeof define && define.amd ? define(e) : t.Spinner = e()
})(this, function () {
    "use strict";

    function t(t, e) {
        var i, n = document.createElement(t || "div");
        for (i in e) n[i] = e[i];
        return n
    }

    function e(t) {
        for (var e = 1, i = arguments.length; i > e; e++) t.appendChild(arguments[e]);
        return t
    }

    function i(t, e, i, n) {
        var o = ["opacity", e, ~~ (100 * t), i, n].join("-"),
            r = .01 + 100 * (i / n),
            a = Math.max(1 - (1 - t) / e * (100 - r), t),
            s = u.substring(0, u.indexOf("Animation")).toLowerCase(),
            l = s && "-" + s + "-" || "";
        return f[o] || (c.insertRule("@" + l + "keyframes " + o + "{" + "0%{opacity:" + a + "}" + r + "%{opacity:" + t + "}" + (r + .01) + "%{opacity:1}" + (r + e) % 100 + "%{opacity:" + t + "}" + "100%{opacity:" + a + "}" + "}", c.cssRules.length), f[o] = 1), o
    }

    function n(t, e) {
        var i, n, o = t.style;
        if (void 0 !== o[e]) return e;
        for (e = e.charAt(0).toUpperCase() + e.slice(1), n = 0; d.length > n; n++) if (i = d[n] + e, void 0 !== o[i]) return i
    }

    function o(t, e) {
        for (var i in e) t.style[n(t, i) || i] = e[i];
        return t
    }

    function r(t) {
        for (var e = 1; arguments.length > e; e++) {
            var i = arguments[e];
            for (var n in i) void 0 === t[n] && (t[n] = i[n])
        }
        return t
    }

    function a(t) {
        for (var e = {
            x: t.offsetLeft,
            y: t.offsetTop
        }; t = t.offsetParent;) e.x += t.offsetLeft, e.y += t.offsetTop;
        return e
    }

    function s(t) {
        return this === void 0 ? new s(t) : (this.opts = r(t || {}, s.defaults, p), void 0)
    }

    function l() {
        function i(e, i)...