Many of you have been searching for the code of loading gif while actual images is being loaded or show a spinner gif while the entire page or images is being loaded. I will show you how to show a loading icon on your site while the images and entire body content is loading, using jQuery.
Display a Loading Icon Until the Page Loads Completely
 |
| Loading Icon |
1.Add Jquery CDN in page head Section
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
3. Place below Javascript code just before the end of body tag.Just search
1: $(window).load(function(){
2: $('.loader').fadeOut();
3: });
4. Just Copy and Paste below CSS code in your CSS File.
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif?e44397') 50% 50% no-repeat rgb(249,249,249);
}
Use your own hosted GIF and change with above in CSS.
5. Add this Div tag just after the body Tag.
1: <div class="loader"></div>
View Demo
Check my Codepen Example.
