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...
Go to **/etc/hosts** file and add the virtual host URL there there have already some URL **Eg:** you want to create **test.local** virtual host using **test.local** URL in your web browser you want to run a particular project `cd /etc` open the host file with text editor below I am using nano editor for file editing 'nano hosts' 127.0.0.1 test.local ( paste that line in hosts file ) create the config file inside the site-available folder normally its like '/etc/apache2/sites-available' `nano test.conf` Eg: We want to run test.local on web browser and it's run /home/xxxx/Documents/projects/test folder code `<VirtualHost *:80> ServerName test.local ServerAlias test.local DirectoryIndex index.php index.html DocumentRoot /home/xxxx/Documents/projects/test <Directory /home/xxxx/Documents/projects/test> ...