<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Native spinner for Bootstrap buttons</h2> <p> <button class="btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </button> </p> A and Button tags: <p> <a class="btn btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </a> </p> <p> <button class="btn btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </button> </p> Different sizes: <p> <a class="btn btn-mini btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </a> </p> <p> <a class="btn btn-small btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </a> </p> <p> <a class="btn btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </a> </p> <p> <a class="btn btn-large btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </a> </p> Left and right positions: <p> <a class="btn btn-success has-spinner"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </a> </p> <p> <a class="btn btn-success has-spinner"> Foo <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> </a> </p> Left and right positions in fixed width .btn: <p> <a class="btn btn-success has-spinner" style="width:50px"> <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> Foo </a> </p> <p> <a class="btn btn-success has-spinner" style="width:50px"> Foo <span class="spinner"><i class="fa fa-refresh fa-spin"></i></span> </a> </p> </div> </div>

@import url("//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"); .spinner { display: inline-block; opacity: 0; max-width: 0; -webkit-transition: opacity 0.25s, max-width 0.45s; -moz-transition: opacity 0.25s, max-width 0.45s; -o-transition: opacity 0.25s, max-width 0.45s; transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */ } .has-spinner.active { cursor:progress; } .has-spinner.active .spinner { opacity: 1; max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */ }

$(function(){ $('.has-spinner').click(function() { $(this).toggleClass('active'); }); });