john coder

The loading dots plugin is available (un-minified) on bitbucket.

I'm on the metro bandwagon. I can't help it. It's just a fun, simple, clean way to design your user interfaces. The animations give life to the otherwise bland arrangement of pixels. Your users will be drawn to changing focal points in your application as they are emphasized with tiny bounces and sliding entrances. The feedback is invaluable from the user's perspective. One easy way to give that kind of feedback is to add an indication that something is happening. It adds some level of perceived performance in your applications.

This plugin animates a collection of dots across the screen left to right. The animation sweeps each dot one by one to the middle section of a container, and then one by one easing them out. It respects the bounds of the parent container, adding some neat degrees of variation to how it can impact your user interface.

Even as I wrote this plugin, I sat in sheer enthrallment over several dots flying across my screen. It's a neat plugin, even if you only ever look at it once.

This animation seems to work best in IE9. It's considerably smoother than in Chrome or FireFox. I have tested it in IE9, Chrome, FireFox, and Safari. At some point I'd like to see how it works on a mobile browser.

Examples

Basic Example

If you have html like this:

<div class="example">
    <button>toggle</button>
</div>

You can add loading dots like this:

$('.example button').loadingDots();

The plugin expects that the element you selected is the trigger. Think of it as adding the ability to show and hide loading dots to the button under the example div. The dots are added after the button, producing essentially:

<div class="example">
    <button>toggle</button>
    <div class="loader">
        <ul>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
            <li> </li>
        </ul>
    </div>
</div>

To show or hide the loading dots, use a click handler like this:

$('.example button').click(function() {
    $(this).toggleLoadingDots();
});

Ajax Example

You can use these dots at the global ajax level as well. If you have a div like this:

<div id="#ajax-example"></div>

Set up your loading dots like this:

$('body').loadingDots({ destination: '#ajax-example' });

This uses the body as a trigger (it doesn't really matter what element you use). By specifying the destination in the options, the plugin will add the dots as a child of the destination, as opposed to adding them after the trigger.

Toggle the animations by handling jQuery's ajaxStart and ajaxStop events:

$('#ajax-example').ajaxStart(function(){
    $('body').showLoadingDots();
}).ajaxStop(function() {
    $('body').hideLoadingDots();
});

Options

These are the options and their respective defaults:

var settings = {
    dotColor: '#00B4FF',
    dotSize: '4',   // size in pixels
    dotQuantity: 6,
    duration: 1300, // time in milliseconds it takes to animate half way across the screen
    destination: '' // element to append dots to
};