"Light-weight spinner indicator (ASCII)"
Bootstrap 3.1.0 Snippet by mrmccormack

<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><sup>5</sup></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() {}); }

Related: See More


Questions / Comments:

Thanks for feedback. I switched to standard ASCII, should work everywhere. I tested on Mac / Linux and iPhone / Android. (buttons not working on Android thought - I'll work on that). I added my FontAwesome snippet link.

mrmccormack () - 10 years ago - Reply 0


Thanks for feedback. I switched to older ASCII characters - should work now. I tested on Mac/Linux/iPhone. on Android, buttons are not working. But it should "spin" on all platforms / browsers.

mrmccormack () - 10 years ago - Reply 0


Thanks!

maxsurguy () - 10 years ago - Reply 0


None of these work in chrome btw.

Mack Hankins () - 10 years ago - Reply 0


What platform? Win or Mac?

maxsurguy () - 10 years ago - Reply 0


Chrome 33 on Win 7 and Mac. Not sure that's a bug, but Chrome has issues rendering some unicodes, looks like it depend on font-family. Take a look here http://unicode-table.com/en... they use a custom font to show the correct character but pay attention to "search result", shows the square when font-family is "Arial, Helvetica, sans-serif". I guess the problem could be an unhandled fallback when the font-family doesn't have the requested character.
Chrome 33, FF 26 on Linux Mint 15 (Ubuntu 13.04) and IE on W7 they work ok

Cosmítar () - 10 years ago - Reply 0


Thank you for that detailed report, maybe a solution is to specify a font that is most likely to be on any platform?

maxsurguy () - 10 years ago - Reply 0


Not sure. In the past I solved similar situations by detecting OS and browser and replacing characters by images, but I think an elegant and crossplatform solution is setting a font (as a gliphicon font) containing the desired chars/icons.

Cosmítar () - 10 years ago - Reply 0


Yeah I was thinking of that too, would be nice to see some of the icon fonts implement this feature, could make some really loading indicators that way. Thanks for your feedback!

maxsurguy () - 10 years ago - Reply 0


cool :)

Andrew Eastwood () - 10 years ago - Reply 0


Doesn't show anything for me either. (Running Chrome on Debian Wheezy.)

edgeofmystery () - 10 years ago - Reply 0


Doesn't work: XP x86 - Opera 21, Firefox 27 ( shows hexa value of character? ), Chrome 33

Martin Smetak () - 10 years ago - Reply 0


>It doesn't show any indicator.. -- Which OS, and Browser and versions? I've tested in Safari, FF, Chrome.. it should work, nothing fancy or too new here. Please advise, I will fix it. thanks Rob

mrmccormack () - 10 years ago - Reply 0


Chrome on android shows nothing either. Will test from desktop and advise

rod () - 10 years ago - Reply 0


It doesn't show any indicator...

Guest () - 10 years ago - Reply 0