UnicodeSpinner.js

A pure textual jQuery spinner using unicode symbols.

by khrome

HTML

<span id="spin" style="font-size:50px"></span><br/>
<span id="spin2" style="font-size:50px"></span><br/>
<span id="spin3" style="font-size:50px"></span><br/>
<span id="spin4" style="font-size:50px"></span><br/>
<span id="spin5" style="font-size:50px"></span><br/>
<span id="spin6" style="font-size:50px"></span><br/>

JavaScript

(function(){
    if(jQuery && jQuery.UnicodeSpinner) { return; }
    (function(jQuery){
        jQuery.fn.UnicodeSpinner = function(sequence, speed){
            var element = this[0];
            if(!sequence) sequence = ['&#x25DC;', '&#x25DD;', '&#x25DE;', '&#x25DF;'];
            var current = '';
            var timer = setInterval( function(){
                var next = '';
                if(current == ''){
                    next = sequence[0];
                }else{
                    for(index in sequence){
                        if(sequence[index] == current){
                            if(index < sequence.length-1) next = sequence[parseInt(index)+1];
                            else next = sequence[0];
                        }
                    }
                }
                element.innerHTML = next;
                current = next;
            }, speed || 200);
        }
    })(jQuery);
})();
jQuery('#spin').UnicodeSpinner();
jQuery('#spin2').UnicodeSpinner(['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']);
jQuery('#spin3').UnicodeSpinner(["⢹", "⢺", "⢼", "⣸", "⣇", "⡧", "⡗", "⡏"]);
jQuery('#spin4').UnicodeSpinner(["-", "\\", "|", "/"], 50);
jQuery('#spin5').UnicodeSpinner(["✶", "✸", "✹", "✺", "✹", "✷"], 100);
jQuery('#spin6').UnicodeSpinner(["◐", "◓", "◑", "◒"], 75);