I have a page being loaded with jQuery. The initial load includes 100 records with 6 icons per record. Needless to say, it takes a few seconds to load and I want to give the user a "loading" prompt/animation.

Any ideas?

I have a page being loaded with jQuery. The initial load includes 100 records with 6 icons per record. Needless to say, it takes a few seconds to load and I want to give the user a "loading" prompt/animation.

Any ideas?

• javascript
• jquery
• ajax

7 Answers 7

http://www.ajaxload.info/ is a great resource for generating animated GIFs for this sort of thing.

Once you've got your animation, render it as part of the page; fire the jQuery load mechanism on the animation's onload() event (so you're certain the animation has loaded first), and use a callback at the end of your loading sequence to disable/hide the animated GIF.

Matt Berseth has a nice jQuery-based way of doing this.

Another ressource for loading images : http://www.loadinfo.net/

You could display a div with an animated GIF image as a loading prompt. That's the way I've done it in the past.

Any time I've needed something like this I replace the element that will be loaded with a simple, centered, animated gif of some sort that says "Loading, please wait" or a similar message. If it's only going to be a few seconds a progress indicator is probably overkill, but a simple animation gives most people the assurance that, yes, your site is still working.

You may want to set up a global ajax event to show/hide the loading icon. Have a look at: http://docs.jquery.com/Ajax_Events

You can do a animation in CCS3, for example if you want a pulse:

The html markup:

<div class="pulse"></div>

The css:

.pulse {
    width: 32px;
    height: 32px;
    margin: 25% auto;
    background-color: #303030;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout{
    0%{
        -webkit-transform:scale(0)
    }
    100%{
        -webkit-transform:scale(1);
        opacity:0
    }
}
@-moz-keyframes scaleout{
    0%{
        -moz-transform:scale(0)
    }
    100%{
        -moz-transform:scale(1);
        opacity:0
    }
}
@-ms-keyframes scaleout{
    0%{
        -ms-transform:scale(0)
    }
    100%{
        -ms-transform:scale(1);
        opacity:0
    }
}
@-o-keyframes scaleout{
    0%{
        -o-transform:scale(0)
    }
    100%{
        -o-transform:scale(1);
        opacity:0
    }
}
@keyframes scaleout{
    0%{
        transform:scale(0);
        -webkit-transform:scale(0)
    }
    100%{
        transform:scale(1);
        -webkit-transform:scale(1);
        opacity:0
    }
}

Or you can create a div with inside image or background image,you have here a few ideas for animation, it have a downloadable set free, enjoy.