<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 ----------> <!--SUBMITTED: March 17, 11:40pm and emailed Maks --> <div class="container"> <div class="row"> <!-- this will center a col 6, and 3 on each side --> <div class="col-md-6 col-md-offset-3"> <img src="https://cdn1.iconfinder.com/data/icons/Vista-Inspirate_1.0/64x64/apps/clock.png" class="pull-right" alt=""> <h2> Light-weight spinner indicator</h2> <p> Rather than images and CSS, here's a light-weight solution using just ASCII characters. It's easy to change size and speed of indicator. <hr> <div class="text-center"> <div id="sp-braille"> <!-- spinner will be written here --> </div> <!-- /. sp-braille --> <button type="button" class="btn btn-sm btn-success" onclick="startSpinner()"> <span class="glyphicon glyphicon-play"></span> Start </button> <button type="button" class="btn btn-sm btn-danger" onclick="stopSpinner()"> <span class="glyphicon glyphicon-stop"></span> Stop </button> <button type="button" class="btn btn-sm btn-default" onclick="hideSpinner()"> <span class="glyphicon glyphicon-remove-sign"></span> Hide </button> <button type="button" class="btn btn-sm btn-default" onclick="showSpinner()"> <span class="glyphicon glyphicon-resize-full"></span> Show </button> </div><!-- ./text-center --> <hr> <span class="badge alert-danger">Update:</span> Thanks for comments and help. <ol> <li>switched to ASCII that will work on any OS/Browser (the braille font was not well supported). </li> <li>see my snippet for <a href="http://bootsnipp.com/snippets/VGBN" target="_blank">spinning FontAwesom fonts (should work everywhere)</a></li> </ol> <br><br> <a href="http://unicode-table.com/en/search/?q=%E2%A1%BF"><img src="http://i.imgur.com/Ky7ltCj.png?1" alt=""></a> <br> <a href="http://jsfiddle.net/mnbayazit/CgkQJ/3/" target="_blank">See jsFiddle for other characters</a> <br><br><br> <hr> <a href="http://validator.w3.org/check?uri=referer;ss=1" target="_blank"><span class="glyphicon glyphicon-check" style="color: #339900;"></span><small> HTML</small>⁵</a> </div><!-- ./col-md6 --> </div><!-- ./row --> </div><!-- ./container -->

body{ margin-top:24px; } #sp-braille { color:#999; margin: 1em; font-size: 30px; }

/* Ref: More ASCII spinners @ http://jsfiddle.net/mnbayazit/CgkQJ/3/ */ $(document).ready(function() { // this will autostart spinner startSpinner(); }); // end .ready function var timerId // global since outside of functions function startSpinner() { if (timerId) return var spin = "|/-\\", char$ = $('#sp-braille'), i = 0; timerId = setInterval(function() { i = i == spin.length - 1 ? 0 : ++i; char$.text(spin[i]); }, 300); // 300 in milliseconds return; } function stopSpinner() { clearInterval(timerId) timerId = null } function hideSpinner() { // if hidden, stop spinner stopSpinner(); $("#sp-braille").hide("slow", function() {}); } function showSpinner() { $("#sp-braille").show("slow", function() {}); }