JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://jsfiddle.net/AndrewDryga/GY6LC/netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<button id="refreshButton" class="btn btn-success has-spinner" onclick="refreshGrid()">
        Refresh
        <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    </button>

CSS

.spinner {
            display: inline-block;
            opacity: 0;
            width: 0;
            -webkit-transition: opacity 0.25s, width 0.25s;
            -moz-transition: opacity 0.25s, width 0.25s;
            -o-transition: opacity 0.25s, width 0.25s;
            transition: opacity 0.25s, width 0.25s;
        }

        .has-spinner.active {
            cursor:progress;
        }

        .has-spinner.active .spinner {
            opacity: 1;
            width: 20px; 
        }

JavaScript

function(){
    $('#refreshButton').click(function() {
        $(this).toggleClass('active');
    });
}