Image via Wikipedia
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!