Punctuation loading "animation", javascript?

javascript, jquery

Solution

The trick to making a string of dots is to make a sparse Array and then join all the elements with the desired character.

var count = 0;
setInterval(function(){
    count++;
    var dots = new Array(count % 10).join('.');
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots;
  }, 1000);

Here is a Live demo.

Problem

I'm looking for a good way to display some punctuation loading "animation". What I want is something like this: ``` This will display at second 1: "Waiting for your input." This will display at second 2: "Waiting for your input.." This will display at second 3: "Waiting for your input..." This will display at second 4: "Waiting for your input...." This will display at second 5: "Waiting for your input." This will display at second 6: "Waiting for your input.." This will display at second 7: "Waiting for your input..." This will display at second 8: "Waiting for your input...." ``` And so on. I started by surrounding the dots in `spans` and thought I could loop through them with jquery and display one more, one more, one more, then reset to 1. But the code got very clumsy, so I wonder how you would do this?

Original source