ASCII Spinners

by 1eddy87

HTML

<pre id="load-spinner" class="load-rotate"></pre>

CSS

#load-spinner {
    font-family: FreeMono,monospace;
    /*margin: 1em;*/
    font-size: 2em;
    font-weight: bold;
    color: red;
}

.load-rotate {
    
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

JavaScript

/*var spins = [
    "▖▘▝▗",
    "┤┘┴└├┌┬┐",
    "◰◳◲◱",
    "◴◷◶◵",
    "◐◓◑◒",
    "|/-\\",
    "⣾⣽⣻⢿⡿⣟⣯⣷",
    "⠁⠂⠄⡀⢀⠠⠐⠈",
    ];*/

var spin = "⣾⣽⣻⢿⡿⣟⣯⣷",
    title$ = $('#load-spinner'),
    i = 0;

setInterval(function() {
    i = i == spin.length - 1 ? 0 : ++i;
    title$.text(spin[i]);
}, 300);