Web page preloaders are the best thing if you want your website to look more beautiful and smoother. In this article, we'll discuss on how to add a web page preloader to your website.
Starting with CSS
We define our screen background using a division named "preloader" and the loader animation using "status".
margin: -100px 0 0 -100px;
Download the image given below and rename it as "loader.gif" (without the "")
Now, once we have designed our loader. We move on to it's working.
Scripts to make it work!
We make the background and the image fade in at the time of loading and fade out at the time when the web page has fully loaded.
// makes sure the whole site is loaded
// will first fade out the loading animation
// will fade out the whole DIV that covers the website.
Since, all the background work has been finished, now we move on to the placement of the loader on our website.
We create 2 divisions. An id named "preloader" and inside it another id named "status". Put " " inside the "status" id without "".
That's it, just publish your website and see the smooth animations do their work.