"Bootstrap buttons spinner"
Bootstrap 3.1.0 Snippet by AndrewDryga

<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'); }); });

Questions / Comments:

Related: See More