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