A very simple tutorial how to make a responsive loader to show system is processing something, like an AJAX call or anything similar.

First create a div, here i have created it in Footer file, having some spans and images or text whatever you prefer, here I have two gif images, as follows:

Give an ID and class to it so that we can write some CSS and JS for it.

Now, the CSS:

If you want to show loader on top of site then replace bottom:0; with top:0;

Now some JS to hide or show the div:

That’s it!!

Once done, it will look like something show in LIVE DEMO



—- Simple CSS, Javascript Responsive Loader —-