Progress Dots

From time to time I need to throw together a small script to do something relatively simple. Today I had to write something that would animate a series of dots. You’ve seen it, those little lines of dots that grow and shrink to give indication that something, somewhere is happening.

It’s a relatively straight forward script, so I’ll just drop it in here with comments:

(function () {

    "use strict";

    // Find #dots, run setDots every 500ms, define your dot, and set size limit
    var dots = document.getElementById("dots"),
        loop = setInterval(setDots, 500),
        _dot = ".",
        size = 3;

    function setDots () {
        // #dots will be truncated when limit is reached, otherwise grows by one
        dots.innerHTML = (dots.innerHTML.length >= size) ? _dot : (dots.innerHTML + _dot);


It’s worth noting that you could probably whip up something similar with CSS alone using pseudo-elements, animation, @keyframes, and content, or even animating a sprite’s location on a background. Of course browser support would be far more limited.

One thought on “Progress Dots”

  1. Well hello, Mr. Jonathan Sampson
    I was looking for Jsonline at first, but soon found out that it is no longer available.
    So i searched for “Jonathan Sampson” on Google and immediately found your site.
    I will continue to visit your site, as I, and always have, love to learn from you.
    Glad to see you doing so well.
    take care,
    and God bless.

Leave a Reply

Your email address will not be published. Required fields are marked *