Hello reader

In this blog! I am going to tell you how to create Dynamic Content Load using jQuery. Generally, we see the content loader on many websites and on some registration form when we click on the next step button after completed the current step, before it takes us on next page it takes sometime to load the next page and in that time period, it shows the circle rotating.

So if you want to add loader in your site the code below will help you

jQuery :

$(document).ready(function() { 
	  $(".button").click(function(){
		   $('#loader').show();
		    $('.button').prop('disabled', 'true');  /* after clicked, button will be disabled */ 
			setTimeout(function() {
		            $('#loader').hide();   /*hide loader image */
		            $('.content').show();  /*show content */
		    }, 1000);  /* taking time to loading the the content */
	  });
});

In the above code, when we click the button, loader will start rotating till the content is not loaded and then after loading the content the clickable button and loader image will get disabled.

CSS:

#loader,
.content{
	display: none;
}
Button{
    padding: 5px 10px; 
    background: #f1f1f1;
    border:1px solid #000; 
    position: relative; 
    border-radius: 5px;
    outline: none;
}


Button:focus{
    outline: 0 none !important;
}
Button:active{
   outline: none;
}
button img{
    position: absolute;
    left: 0; 
    right: 0; 
    margin: auto; 
    bottom: 0; 
    top: 0;
}

In above code, I have hidden loader image and content using block level property  “display:none”. The essential property used here is position: absolute and the parent element button is first positioned relative.

Output: Below is the output of loader image rotating on the button.

first image shows simple button, second with loader and third after loading content

You can see live demo here: https://jsfiddle.net/mani_123/9obhtk3v/show/  

HTML:

<div class="loader1">
		<button class="button" >loader 
			<img id="loader" src="http://besseges2016.squaresystem.co.uk/images/slider/loading.gif">
		</button>	
		<div class="content">
			<p>
              Prime Minister Narendra Modi met senior officials on Monday to review the pros and 
              cons of the India-Pakistan Indus Waters Treaty amid growing pressure on New Delhi to 
              scrap the agreement.
            </p>
		</div>
</div>