Punctuation loading "animation", javascript?

Question

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?

Answer 1

Pure CSS solution

Demo: jsfiddle.net/feklee/D59P9

• HTML:

  Waiting<span class="dots"><span>.</span><span>.</span><span>.</span></span> for more.
  

• CSS:

  @keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  @-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  
  .dots span {
      animation: dots-1 1s infinite steps(1);
      -webkit-animation: dots-1 1s infinite steps(1);
  }
  
  .dots span:first-child + span {
      animation-name: dots-2;
      -webkit-animation-name: dots-2;
  }
  
  .dots span:first-child + span + span {
      animation-name: dots-3;
      -webkit-animation-name: dots-3;
  }
  

WebKit-only alternative

Advantage: No nested tags. This means that the ellipsis could be put as content into an ::after pseudo element.

Demo: jsfiddle.net/feklee/vFT7W

• HTML:

  Waiting<span>...</span> for more.
  

• CSS:

  body {
      font-family: 'Roboto', sans-serif;
      font-size: 50px;
  }
  
  @-webkit-keyframes dots {
      0% { background-position: 0px; }
      100% { background-position: 50px; }
  }
  
  span {
      background: linear-gradient(to right, white 50%, black 50%);
      color: transparent;
      -webkit-background-clip: text;
      -webkit-animation: dots 1s infinite steps(4);
      padding-right: 40px;
      margin-right: -40px;
  }
  

Answer 2

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.

Answer 3

This can be very easy:

HTML

<span class="dots"></span>

JQuery

setInterval(function() {
    var th = $('.dots');
    if(th.text().length < 5){
        th.text(th.text()+".");
    }else{
        th.text("");
    }
}, 500);

Demo

Answer 4

Now sure how the code got out of hand, you could just do:

setInterval(function () {
  var span = $("#text-loader").children("span:eq(0)");
  var ellipsis = span.html();
  ellipsis = ellipsis + ".";
  if (ellipsis.length > 5) {
    ellipsis = ".";
  }
  span.html(ellipsis);
}, 1000);

<div id="text-loader">
  This will display at second 1: "Waiting for your input<span>.</span>
</div>

And as for the 1, you can swap that out with the number of periods.