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: ..

At 0200 miliseconds the span content is: ...

In a loop.

What is the best / easiest way to make it?

if you just add "." each 100ms to the span content, doesn't it work? span.innerHTML += "."; — Maxym, Jan 09 '11 at 14:38

Gordon Gustafson · Accepted Answer · 2011-01-09T15:22:10.420

<span id="wait">.</span>

<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 3 ) 
        wait.innerHTML = "";
    else 
        wait.innerHTML += ".";
    }, 100);
</script>

Or you can get fancy and have them go forward and back:

<span id="wait">.</span>

<script>
    window.dotsGoingUp = true;
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( window.dotsGoingUp ) 
            wait.innerHTML += ".";
        else {
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
            if ( wait.innerHTML === "")
                window.dotsGoingUp = true;
        }
        if ( wait.innerHTML.length > 9 )
            window.dotsGoingUp = false;



        }, 100);
    </script>

Or you could make them go back and forth randomly:

<span id="wait">.</span>

<script type="text/javascript">
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( Math.random() < .7 )
            wait.innerHTML += ".";
        else
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
        }, 100);
</script>

Or I could get a life and stop posting additional snippets.... :D

As Ivo said in the comments, you need to clear the interval at some point, especially if you are not loading a new page after the waiting is finished. :D

Now what's the point of having the interval go on forever after it there are 3 dots? ;) — Ivo Wetzel, Jan 09 '11 at 14:52
@Ivo: Errm... when there are three dots, it goes back to zero. And so on. For a loading animation or so. — thejh, Jan 09 '11 at 15:01
@thejh Hm? ah... there's an update comment on the other answer, always love incomplete / mis-worded questions. — Ivo Wetzel, Jan 09 '11 at 15:03

score 59 · Answer 2 · answered Dec 05 '14 at 15:24

59

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

answered Dec 05 '14 at 15:24

vkjgr

4,338
1
26
19

is that compatible with older browsers? – Babu James Feb 09 '15 at 10:00
@BabuJames "What" is old? IE8 and such? No, sadly not! https://developer.mozilla.org/docs/Web/CSS/animation – yckart Apr 29 '15 at 13:37
How do you make it faster? – Monece Solis Oct 05 '15 at 02:46
2

Really nice and clean way – Iulius Curt Oct 13 '15 at 11:27
@MoneceSolis change `1s` to `0.5s` to make it go faster – Maria Ines Parnisari Jul 17 '16 at 05:34
This was helpful. :) – Mekey Salaria Mar 06 '18 at 16:39
https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ – gman Jan 09 '22 at 04:03

lukaszkups · Answer 3 · 2022-05-18T10:23:39.007

16

Example: https://codepen.io/lukaszkups/pen/NQjeVN

You can animate css content too!

p span:before {
    animation: dots 2s linear infinite;
    content: '';
  }

  @keyframes dots {
    0%, 20% {
      content: '.';
    }
    40% {
      content: '..';
    }
    60% {
      content: '...';
    }
    90%, 100% {
      content: '';
    }
}

<p>Loading<span></span></p>

edited May 18 '22 at 10:23

answered Jul 31 '19 at 11:24

lukaszkups

5,790
9
47
85

4

This is a simple & effective solution IMO. – Trevor Gehman Jan 20 '20 at 19:17
1

thank you! I've even wrote a blog post about it :D https://lukaszkups.net/notes/lets-create-dot-dot-dot-dot-dot-dot-css-loading-animation/ – lukaszkups Jan 20 '20 at 19:19
1

https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ – gman Jan 09 '22 at 04:04

score 7 · Answer 4 · edited Jun 28 '18 at 02:23

This is similar to Veiko Jääger's solution. With this solution, the color of the dots is the same as the text it associates with.

<html>
<head>
    <style>
.appendMovingDots:after {
    content: ' .';
    animation: dots 3s steps(1, end) infinite;
}
@keyframes dots {
    0%, 12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        text-shadow: .5em 0;
    }
    50% {
        text-shadow: .5em 0, 1em 0;
    }
    62.5% {
        text-shadow: .5em 0, 1em 0, 1.5em 0;
    }
    75% {
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0;
    }
    87.5%, 100%{
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0, 2.5em;
    }
} 
  </style>
 </head>
 <body> 
  <span class="appendMovingDots" style="font-size:20px">This is a test</span> 
 </body>
</html>

score 6 · Answer 5 · edited Jan 09 '11 at 14:50

6

Example: http://jsfiddle.net/subTZ/

var span = document.getElementById('myspan');

var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 4) 
        span.innerHTML = '';
    //clearInterval( int ); // at some point, clear the setInterval
}, 100);

edited Jan 09 '11 at 14:50

thejh

44,854
16
96
107

answered Jan 09 '11 at 14:40

user113716

318,772
63
451
440

Yeah, but that creates after some time ................................ a very long span. How can i clear that after 3 dots? – Thew Jan 09 '11 at 14:42
@Thew: Just test the `length` of the `innerHTML` each time, then use the `clearInterval` I included. I didn't know you only wanted 3. – user113716 Jan 09 '11 at 14:43
https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ – gman Jan 09 '22 at 04:04

Plikard · Answer 6 · 2022-01-10T12:01:07.710

4

      
    
    let span = document.querySelector('span');
        i = 0;
    
    setInterval(() => {
        span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
    }, 500)

loading<span></span>

edited Jan 10 '22 at 12:01

answered Dec 05 '19 at 13:17

Plikard

179
7

https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/ – gman Jan 09 '22 at 04:04

yckart · Answer 7 · 2015-04-29T18:47:45.937

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.

score 0 · Answer 8 · answered Oct 06 '20 at 10:37

With String.prototype.repeat() you can do:

var element = document.querySelector(...);
var counter = 0;

var intervalId = window.setInterval(function() {
    counter += 1
    element.innerHTML = '.'.repeat(1 + counter % 3)
}, 350);

// Use the following to clear the interval
window.clearInterval(intervalId)

Note: String.prototype.repeat() is currently not supported in < IE11

Dot dotdot dotdotdot as loading?

8 Answers8

Linked