<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="spinner"> <!-- spinner will be written here --> </div> <!-- /. spinner --> <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 --> <br><br><br> <hr> <a href="http://validator.w3.org/check?uri=referer;ss=1"><span class="glyphicon glyphicon-check" style="color: #339900;"></span><small> HTML</small>⁵</a> </div><!-- ./col-md6 --> </div><!-- ./row --> </div><!-- ./containter -->

body{ margin-top:24px; } #spinner { 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$ = $('#spinner'), 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(); $("#spinner").hide("slow", function() {}); } function showSpinner() { $("#spinner").show("slow", function() {}); }