<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="sp"></div> </div>

/* Spinning glyphicons, based on http://www.bootply.com/128062 */ .glyphicon.spinning { color:red; animation: spin 1s infinite linear; -webkit-animation: spin2 1s infinite linear; } #fnt { color:red; }

$.fn.extend({ showSpinner: function () { this.each(function () { $(this).html( '<div class="text-center" style="font-size:1.6em;margin:20px 0;">' + ' <span class="glyphicon glyphicon-refresh spinning"></span>' + '</div>'); }); } }); $('#sp').showSpinner();