From a true story...

Here I was putting the finishing touches to my new website design when I saw that the images on the homepage were taking a bit of time to load and so some kind of loader was necessary. After further tought, I went for a Sinclair Spectrum style loader (for those that are too young to remember, the Spectrum loader consisted of coloured bars in the screen's border that moved according to the received data from the cassette deck).

In this short tutorial I will show you how you can use the same effect on your web page.

First, we need an image that is going to be used for the loader. I grabbed mine by running a Spectrum emulator in record mode, then using a gif editor to crop part of the border. For simplicity, here is the resulting image that you need to include in your project:

spectrum loader

Then we need some css in order to show the loader

body.spec
{
background-image: url('Images/specload2.gif')
}

and apply it with JQuery once the html document is ready

$(document).ready(function () {
$("body").addClass("spec");
});

Note: you will need to add a reference to JQuery for this. So if there is no JQuery in your page yet, add this line to the page html head section:

‹script src="http://code.jquery.com/jquery-1.9.1.min.js"›‹/script›

This will have the effect of showing the loader while the rest of the page elements are loaded. The last thing to do is to remove the loader once that all the elements on the page have been loaded (again by using JQuery).

$(window).load(function () {
$("body").removeClass("spec");
});

0 comments

Add your comments