Light-weight spinner indicator (ASCII)
<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;
}
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.,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.,Thanks!,None of these work in chrome btw.,What platform? Win or Mac?,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,Thank you for that detailed report, maybe a solution is to specify a font that is most likely to be on any platform?,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.,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!,cool :),Doesn’t show anything for me either. (Running Chrome on Debian Wheezy.),Doesn’t work: XP x86 – Opera 21, Firefox 27 ( shows hexa value of character? ), Chrome 33,>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,Chrome on android shows nothing either. Will test from desktop and advise,It doesn’t show any indicator…,The author is mrmccormack
Loading...
