Dot dotdot dotdotdot as loading?

Question

I wanna create some loading dots, like this:

At 0000 miliseconds the span content is: .

At 0100 miliseconds the span content is: ..

Answer 1

In my mind, the easiest way is an if/else statement.

However, a bit math to calculate the dots-length and the famous Array.join-hack to repeat the dot-char, should do the trick too.

function dotdotdot(cursor, times, string) {
  return Array(times - Math.abs(cursor % (times * 2) - times) + 1).join(string);
}

var cursor = 0;
setInterval(function () {
  document.body.innerHTML = dotdotdot(cursor++, 3, '.')
}, 100);

You could improve the readability a bit, by wrapping the "count-up-and-down"-part and "string-repetition" in separate functions.

Answer 2

Or.. you can do it with CSS ;)

<p class="loading">Loading</p>

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: white;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 white,
      .5em 0 0 white;}}

Codepen sample