Loading Dots jQuery Plugin

Avatar of Chris Coyier
Chris Coyier on (Updated on )

📣 Freelancers, Developers, and Part-Time Agency Owners: Kickstart Your Own Digital Agency with UACADEMY Launch by UGURUS 📣

A little while ago reader James Dimick emailed me some jQuery code he was working on to make a “loading dots” thing. You know, the classic design pattern where the screen (or some area) shows “Loading…” with the dots growing out.

Loading
Loading.
Loading..
Loading…
Loading….

I took a look at his code and said, “oh yeah, I’m sure I could do this more efficiently.” Then I took what he had and made it twice as long =). But in fairness, I turned it into a plugin and made it do more with more flexibility.

What it does

You call it upon any element like this:

$("#randomArea").Loadingdotdotdot({
    "speed": 400,
    "maxDots": 4,
    "word": "Loading"
});

It entirely replaces the content of that element with “Loading” text (with the animated dots). The speed is how fast the next dot will be placed. The maxDots is how many dots long it will go before it starts over.

The plugin makes sure the “Loading…” is in the exact center, both horizontally and vertically, of the element it’s being called in.

What is it for?

Mostly likely, you would use it on an element right before some AJAX call. This will gives users some indication that something is happening with that area. Presumably upon success (or error) of that AJAX call, the content of the area will be replaced again (replacing the “Loading…”).

Demo and Download

Check out the demo page before downloading/using. There is a “cleanup” function there that should be used in any live environment. There is a setInterval() function that gets called in the plugin and after a successful AJAX call that interval should be stopped to prevent the browser from running it on an element that doesn’t even exist anymore.

View Demo   Download Files

Fun lesson learned

I created this plugin using what I kind of think of as the Doug Neiner method. So all the functions, variables, and parameters are contained within the “base” of the plugin. Another thing I learned from Doug is how to have a plugin do different things depending on what parameters you pass it. You saw the default usage above, where you pass it a speed and maxDots as an object. The cleanup thing it does though is done by passing the plugin a string like

$("#randomArea").Loadingdotdotdot("Stop");

This is done by testings for the typeof of the parameter before doing anything.

$.fn.Loadingdotdotdot = function(options) {
        if (typeof(options) == "string") {
            // do something
        } else { 
            // do a different (default) thing
        } 
};

Using CSS3 Animations

James Dimick also started playing with CSS3 animations and came up with some alternate techniques for this loading dots business. One of them is wrapping the dots inside spans, then using keyframe animation to loop the opacity of them infinitely, offset from one another.

<p id="loading">Loading<span>.</span><span>.</span><span>.</span></p>
@-webkit-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@-moz-keyframes opacity {
	0% { opacity: 1; }
	100% { opacity: 0; }
}

#loading {
	text-align: center; 
	margin: 100px 0 0 0;
}

#loading span {
	-webkit-animation-name: opacity;
	-webkit-animation-duration: 1s;
	-webkit-animation-iteration-count: infinite;
	
	-moz-animation-name: opacity;
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: infinite;
}

#loading span:nth-child(2) {
	-webkit-animation-delay: 100ms;
	-moz-animation-delay: 100ms;
}

#loading span:nth-child(3) {
	-webkit-animation-delay: 300ms;
	-moz-animation-delay: 300ms;
}

Do note the vendor prefixes and current browser support.

Animation Demo #1

His next idea was using a circle-of-dots that animates around, like those fun little AJAX loading graphics, only with just CSS3 animations.

Animation Demo #2

Updates

1/25/2012:

Updated plugin to include the “word” parameter so you can change the text easily. Thanks Harris Novick.

Here’s another CSS animation technique in which the group of dots are all together (instead of in separate spans) and revealed by animating the width of the their parent with hidden overflow.

These spinners are also worth noting as they are in the same basic design pattern group.