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 Google!) 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 <body> tag of your page and another for content that will be parsed by Dojo.
<div id="loader"></div> <div id="content">I AM SOME CONTENT!</div>
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.
<style type="text/css">
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;
}
</style>
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.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js"></script>
<script type="text/javascript">
//CDATA[
dojo.require("dojo.parser");
dojo.addOnLoad(_initLoader);
function _initLoader() {
var content = dojo.byId("content");
var loader = dojo.byId("loader");
// Parse the content manually
dojo.parser.parse(content);
// Fade the loader div out
dojo.fadeOut({
node: loader,
duration: 250,
onEnd: function() {
loader.style.display = "none";
}
}).play(250);
}
//]]>
</script>
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:
<div id="loader"><div id="loaderInner">Loading...</div></div> <div id="content">I AM SOME CONTENT!</div>
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;
}
</style>
That’s one sexy loader if I do say so myself – enjoy it!
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_c.png?x-id=e1cd0ce5-10ad-4d57-8aa4-761058fee161)
loading...