Animated dots

HTML

<div id="test"></div>

JavaScript

function animateWithDots(id, str, speed) {
    var string = str + '...',
        i = parseInt(string.length, 10) - 3,
        sp = speed || 500,
        container = document.createElement('span'),
        dots,
        el = document.getElementById(id);
    
    container.id = 'animateWithDots';
    container.innerHTML = str;
    el.appendChild(container);
    
    function count() {
        if (!container) {
            clearTimeout(dots);
        }
        container.innerHTML = string.substring(0, i);
        i++;
        if (i === parseInt(string.length, 10) + 1) {
            i = parseInt(string.length, 10) - 3;
        }
        
        dots = setTimeout(count, sp);
    }
    
    function start() {
        clearTimeout(dots);
        dots = setTimeout(count, sp);
    }
    
    function stop() {
        clearTimeout(dots);
    }
    
    start();
    
    return {
        start: start,
        stop: stop
    };
}
var text = animateWithDots('test', 'Stopping in 5 seconds', 500); 

setTimeout(function() {
    text.stop();
}, 5000);