How to add Preloader on your website using CSS & jQuery
In this article, we going to see how to add Preloader on your website using CSS & jQuery. Preloaders are most important to the websites, this will help to stay the user on our website instead of jumping to another website. You can use the preloader in two ways one is using gif image and another with CSS loader, using any one of this method you can implement the loader on your website. Here we going to use gif image, this will hide once all website images, content and scripts loaded successfully.
With few lines of CSS and jQuery code, the process has been done, below you have clear steps to integrate into your website.
Step-1 HTML
Add the HTML code below in your <body> tag.
|
1 |
<div class="preloader"></div> |
Step-2 CSS
Now add CSS in your Stylesheet and add the source of a gif image. If you like to get your gif loader image, here may variety of loaders you can get by clicking here.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.preloader { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url('../images/preloader.gif'); background-repeat: no-repeat; background-color: #FFF; background-position: center; z-index: 999999; } |
Step-3 jQuery
The below script will hide the loader once all the scripts are loaded successfully. Now you need to add the below code above the </body> tag.
|
1 2 3 |
$(window).load(function() { $('.preloader').fadeOut('slow'); }); |
Conclusion:
I hope this article will help you to integrate the preloader into your website. If you like this article, please share it with your friends. Thanks a lot.
