Add Preloader to your website
- Before you can add preloader to your website, Make sure that you have added jQuery to your webpage. If you haven’t already then place the following code within your <head> tag.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
- Immediately after the above placed line of code, copy-paste the following code.
<script>
jQuery(window).load(function(){
jQuery(".hameid-loader-overlay").fadeOut(500);
});
</script>
The above
code is to fade out the preloader animation once the page has been completely
loaded.
- Now, add the following CSS code in your stylesheet. Make sure that the path to the background image is set correctly.
.hameid-loader-overlay {
width: 100%;
height: 100%;
background: url('images/preloader.gif') center no-repeat #FFF;
z-index: 99999;
position: fixed;
}
If you
want a transparent background, You can use the opacity CSS property.
- Just after your <body> tag, Place the following piece of code.
<div
class="hameid-loader-overlay"></div>
- Refresh your page now. You should now see the preloader animation while your page is loading. We’re done, right? Not really. Disable Javascript in your browser, The preloader screen will stay forever. Not everyone has JavaScript enabled in their browser. To fix that we disable the preloader if JavaScript is disabled by adding the following within the tag.
<noscript>
<style>.hameid-loader-overlay { display: none; } </style>
</noscript>
That’s it. Now, You have added
preloader to your website. Also, If JavaScript is disabled in the browser, The
preloader is not shown at all.
No comments:
Post a Comment