1. first need to add the below div into the page where you want to show the loader <div class="loader-for-process" id="overlay"> <img id="ajaxloader" src="loader.gif" height="100px" width="100px" border=0 /> </div> 2. add CSS for the loader image and div #overlay { position: fixed; /* Sit on top of the page content / display: none; / Hidden by default / width: 100%; / Full width (cover the whole page) / height: 100%; / Full height (cover the whole page) / top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.9); / Black background with opacity / z-index: 2; / Specify a stack order in case you're using a different order for other elements / cursor: pointer; / Add a pointer on hover */ } #loader-image{ position: absolute; top: 50%; left: 50%; font-size: 50px; color: white; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); } 3. download any gif image with rotation...