SpiffyJr's Blogaroo

Intro

If you’re building a large site and utilizing Dojo you can get pages that are crammed full of widgets, layout containers, dialogs and more. All these useful features give your site a clean and very user-friendly experience. One side-effect, however, is that the HTML/CSS is loaded and then Dojo begins parsing which can cause your page to jump around while each element is rendered. I found this highly annoying so I scoured the web (<3 !) and managed to find a solution. I utilize a #loader div which covers the entire screen and then fade it out using dojo.addOnLoad(). This is extremely simple to implement and should only take a few minutes.

Live Demonstration

Take a peak at the live demonstration of the basic loader (or the fancy loader) to see where we’re headed. If you’re interested in how I got there keep on reading!

The HTML

The HTML consists of a single div located directly under the tag of your page and another for content that will be parsed by Dojo.

I AM SOME CONTENT!

The CSS

CSS stretches the div to the full viewport of the page. I color the #loader the same color as the background of the page I’m loading to give it a nice and smooth transition.

The Script

Even the Dojo code is easy! We tell dojo to manually parse the content div and then we add a fadeOut animation to the #loader div and onComplete set the loader display to none.

Pump it up!

So, we created a loader, and it’s pretty nifty but let’s pump it up a bit by adding a “Loading…” message a la Google’s GMail. First, we need to modify the #loader div to include a #loaderInner which will house our loading message like so:

Loading...
I AM SOME CONTENT!

Next, we tweak the CSS a bit to colorize the loading message, throw in some padding, and give it a bit of flare.

        body {
                background: #fff;
        }

        #content {
                text-align: center;
                width: 100%;
        }

        #loader {
                background: #fff;
                height: 100%;
                left: 0;
                margin: 0;
                padding: 0;
                position: absolute;
                top: 0;
                vertical-align: middle;
                width: 100%;
                z-index: 999;
        }

        #loaderInner {
                -webkit-box-shadow: -1px 1px 5px #888;
                background-color: #FFFFCB;
                color: #c99800;
                display: table;
                font-size: 16px;
                padding: 5px 13px;
                text-align: center;
        }

That’s one sexy loader if I do say so myself – enjoy it!

Tags: Cascading Style Sheets, CSS, Data Formats, , HTML, HTML element, JavaScript, Style sheet

This entry was posted on Wednesday, March 3rd, 2010 at 11:12 am and is filed under Dojo, Random, Technologies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.