Using website pre-loader make your website is attractive eye caching pre loading website area. Its a very easy to add in any website in header. You just need to add one simple div tags, css and jquery small things…
See below demo example:
Now i describe you to how configure for your webpage/website:
First you need to add below html code on your website body
....
<body>
<!-- PRELOADER -->
<div id="preloader">
<div class="inner">
<span id="loader">
// Loader Image or other taxt you can add here
<img src="ajax-loader.gif">
Loading...
</span>
</div>
</div><!-- /PRELOADER -->
</body>
...Now you need to be add below css on your css file or direct on your page:
<style type="text/css">
/** Loader style **/
#preloader{position: absolute;width: 100%; height: 100%; left: 0px; top: 0px; background: #fff; display: table;}
#preloader .inner{position: relative;width: 100%; height: auto; display: table-cell; text-align: center; vertical-align: middle;}
</style>After you need to add js for remove this loader after complete html have load
<script type="text/javascript">
if(jQuery('#preloader').length > 0) {
jQuery(window).load(function() {
jQuery('#preloader').fadeOut(1000, function() {
jQuery('#preloader').remove();
});
// setTimeout(function() {}, 1000);
});
}
</script>Now you just need to refresh and working all thing and pre-loader as well.
Thanks let me know if you need anything else to make batter design for your business.
Leave a Reply