JSFiddle - React, Tailwind, and code Playground

by amilarox

HTML

<script src="http://fgnass.github.com/spin.js/dist/spin.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<div style="margin-top:10px;margin-left:10px">
    <div id="foo" data-loading-text="." class="btn btn-primary">Save</div>
    <div id="fooTwo" data-loading-text="." class="btn btn-primary">Submit</div>
</div>

CSS

.btn{
    width:50px;
    height:20px;
    display:table-cell; 
    vertical-align:middle;
}

.btn .spinner{
    margin:0 auto 0 auto;
}

JavaScript

function loadingButton(id) {
    var opts = {
        lines: 15,
        // The number of lines to draw
        length: 5,
        // The length of each line
        width: 2,
        // The line thickness
        radius: 4,
        // The radius of the inner circle
        corners: 1,
        // Corner roundness (0..1)
        rotate: 0,
        // The rotation offset
        color: '#fff',
        // #rgb or #rrggbb
        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: 'auto',
        // Top position relative to parent in px
        left: '-10px' // Left position relative to parent in px
    };

    var target = document.getElementById(id);

    //uncomment to put the button in enabled state
    var btn = $("#" + id);
    btn.button('loading');
    
    setTimeout(function() {
        btn.button('reset');
    }, 3000);

    //clear the default loading text
    btn.html('');

    //create the spinner
    var spinner = new Spinner(opts).spin();

    //add the spinner to button
    target.appendChild(spinner.el);
}

$(function() {
    $(".btn").live('click', function() {
        if (!$(this).hasClass('disabled')) {
            loadingButton($(this).attr('id'));
        }
    });
});