Coding / Programming Videos

Post your favorite coding videos and share them with others!

jQuery Preloader for Websites – W3lessons

Source link

Last modified on by Karthikeyan K

Now a days every websites are powered by jQuery Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code. We want our user to see something is happening in the background which clicking on any urls in the webpage. This simple JQuery Preloader trick will help them to wait for few seconds in the page before taking any hard decision to move out from our website.

Check my another article to show busy loader gif for ajax related content using jQuery – Click here

jQuery Preloader for websites

jQuery Preloader

jQuery Code to Create Preloader

// makes sure the whole site is loaded
jQuery(window).load(function() {
// will first fade out the loading animation
jQuery("#status").fadeOut();
// will fade out the whole DIV that covers the website.
jQuery("#preloader").delay(1000).fadeOut("slow");
})


Here I have used jQuery function – it waits for the assets in the page to be completely loaded

CSS Code

#preloader {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fefefe;
z-index: 99;
height: 100%;
}

#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-image: url(ajax-loader.gif);
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
}

 

checkout my latest post on Top 20 most used jquery snippets in 2019

HTML Usage

<div id="preloader">
<div id="status">&nbsp;</div>
</div>

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

Source link

Bookmark(0)
 

Leave a Reply

Please Login to comment
  Subscribe  
Notify of
Translate »