Grow your CSS skills. Land your dream job.

Loading Dots jQuery Plugin

Published by Chris Coyier

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.

Comments

  1. Permalink to comment#

    Nice, bookmark it because I always used images :)

  2. Thanks for sharing, but I don’t feel it’s neccesary for a site, and would just take more loading time loading the plugin than it probably would letting the image load by itself.

    *phew*

    With the obvious stated, I’d like to add that plugins and other effects like this are often gateways to more practical applications, and it opens doors for those that want to learn.

    Thanks again.

  3. I have a very similar MooTools plugin called Dotter:

    http://davidwalsh.name/mootools-dotter

  4. Real nice implementation Chris. I guess we have a showdown been “Dotter” and jQuery Dots.

  5. Chris,

    Thanks for that Doug Neiner tool reference. I’m finally beginning to grasp jQuery Plugin development… It’s about time.

    I’m definitely interested in the CSS3 implementation of this. I pretty much refuse to use .gif animations anywhere at this point, so finding a way to do it with CSS as a progressive enhancement is great. Then we’ll just use the regular dotdotdot as a fallback.

    -Jacob

  6. Sjors
    Permalink to comment#

    I think it’s very intuitive and fits better in designs. Thanks, I’ll keep it in mind.

  7. Permalink to comment#

    Hey very nice share Chris… I just found your blog and im new to Ajax. All you posts has been very helpful so far.

    Keep up the good work and thanks for sharing all this stuff :)

  8. Jedrek
    Permalink to comment#

    The webkit animation way is so cool 8)

  9. You could add text option that defaults to “Loading”, with this users could use a personalized text and also use in other languages, for example in pt_BR would be “Carregando”

    Nice plug-in idea, congratulations.

  10. Love how css3 animation works :) Great plugin as well :)

  11. Hi,
    Its a nice alternative for image. Can’t we make it just increasing dot’s. Not any fixed number. Will it work. Can we show count of dots so we can see how much time its taking actually. It might be frustrating for visitor to see that content is taking to much time.
    Can we??

  12. Permalink to comment#

    Are there -moz and -o (and core CSS3) options for the elements used in the webkit version? Be interesting to see a similar implementation but with fallback and/or cross-browser compatibility.

  13. Quite cool effect. But does the old browsers support this one?

  14. Permalink to comment#

    NICE,
    been lookin for something like this for a while now

    on a side note: i like seeing coorparative articles like this, keep up the good work
    please…

  15. chris
    Permalink to comment#

    you’d probably want to show the user not just progress, but also the amount of progress. to which end you can show the finish line in many different ways.
    personally prefer a spin gif or percentage bar, which don’t require translating.
    so reminds me of commodore 64 days.
    take care

    chris

  16. nice tool i was really searching for the same…. tahnks for the share

  17. Permalink to comment#

    Prefer images with animations or you switch images to make them seem animated but thanks for that one it will do before one can make appropriate images

  18. Nice use of jQuery, but I doubt I would find many uses for it. The only time I ever have a loading bar is on flash files over 150k, but all my jQuery etc seems to load pretty much straight away, and I’m sure there aren’t many dial up users out there anymore.

    Would having an extra plug-in on something not just increase loading time anyway?

    I know you can style this with font families and colors etc, but I do think graphic elements make loading bars etc look so much better, could this plugin be used along with maybe some graphical elements (ie. it will load 4x images of a fancy dot or something) I think that would intrigue more people into using it.

  19. Permalink to comment#

    a very well written article……

  20. Jim
    Permalink to comment#

    It would be nice if the dots faded in rather than just appear.

  21. Stephen
    Permalink to comment#

    I probably would have just made it switch between periods and spaces (string manipulation) instead of messing with CSS3 opacity changes, but maybe I’m just old school.

    It’s a nice idea to avoid using a loading image, at any rate.

  22. Permalink to comment#

    I’d like to see a basic loading plugin for page elements as they load for the first time, as the page itself is opening.

  23. very useful Tool! Thank you Man!

  24. Great post, this code will definitely come in handy!

    Thanks.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".