Question

This code provide a dot effect, like a loading bar(” Loading., Loading.., Loading…), but the problem , that only one single span id works, the second one wont, i dont know why…
please help me out guys

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function showProgressDots(numberOfDots) {

    var progress = document.getElementById('progressDots');

    switch(numberOfDots) {
        case 1:
            progress.innerHTML = '.';
            timerHandle = setTimeout('showProgressDots(2)',200);
            break;
        case 2:
            progress.innerHTML = '..';
            timerHandle = setTimeout('showProgressDots(3)',200);
            break;
        case 3:
            progress.innerHTML = '...';
            timerHandle = setTimeout('showProgressDots(1)',200);
            break;
    }
}
window.setTimeout('showProgressDots(1)',100);
//-->
</SCRIPT>

Loading<span id="progressDots" style="position:absolute;"></span>
SecondLoading<span id="progressDots" style="position:absolute;"></span>

Answer 1

Just posting a little plugin i made for this (for the fun of it..).

(function($){
    $.fn['progress'] = function(_options){
        var options = {
            symbol: '.',
            delay: 200,
            length: 3,
            duration: 0
        };
        if (typeof _options === 'object'){
            $.extend(options, _options);
        } else if (_options === 'clear'){
            return this.each(function(){
                clear.apply(this);
            });
        }
        
        function display(){
            var self = $(this),
                txt = self.text() + options.symbol;
            if (txt.length  > options.length){
                txt = '';
            }
            self.text( txt );
        }
        
        function clear(){
            var self = $(this),
                timer = self.data('progressTimer');
            
            clearInterval(timer);
            self.text('');
            self.removeData('progressTimer');
        }
        
        return this.each(function(){
            var self = $(this),
                that = this,
                timer = null;
            
            timer = setInterval(function(){
                display.apply(that);
            }, options.delay);
            
            self.data('progressTimer', timer);
            
            if (options.duration){
                setTimeout(function(){
                        clear.apply(that);
                    }, options.duration);
            }
        });
    }
                         
})(jQuery);

You use it with

// to set it
$('some-selector').progress({/*options*/});

// to stop it
$('some-selector').progress('clear');

with available options being

• symbol the character to add on each iterations (default is .)
• length the max number of symbols to display before it starts over (default is 3)
• delay the time it takes for each extra symbol to be added (in milliseconds) (default is 200)
• duration total duration (in milliseconds) before clearing the plugin (default is 0 which means no auto clearing)

example ^{points to jsfiddle}

$('some-selector').progress({
  symbol: '*',
  length: 10,
  delay: 100,
  duration: 5000 
});

---

update for comment

To clear it automatically after some specific time just add a timeout to your code..

so

var progressElements = $('some-selector').progress({/*options*/}); // set the progress
setTimeout(function(){
   progressElements.progress('clear');
 }, 1000); // 1000ms = 1 second

---

update for 2nd comment

changed the plugin code above to allow for a duration parameter.

If specified, it declares the time after which the plugin will automatically clear..

Demo at http://jsfiddle.net/gaby/gh5CD/3/ (the second loader will clear after 2 seconds)