Page preloaders are useful if you have a big landing page or a lot of content and pictures, videos, so the visitors are “entertained” while the page is loading.

Simple Preloader demo


Click on the picture to view the demo in the tab


Timing of the preloader is now static – but this is changed when you transfer to the live site, when you actually calculate when the page is loaded.

$(document).ready(function() {

}, 2000);



This is a CSS3 spinning preloader with very “goofy” filling to it. Usually the lines are very thin and elegant, but in this case we’ve gone overboard just to make a point.

Till next time, take care …