Skip to main content

How to show loader into the web page using jQuery and CSS

 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 and rename it as loader.gif and put with the coder and map the path on img src attribute



4. Use jquery attribute to show and hide the image using 

jQuery('overlay').show() 

jQuery('overlay').hide() 






Comments

Post a Comment

Popular posts from this blog

Creating virtual host in ubuntu system

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> ...
Post a Comment
Read more

How to remove public folder mapping from laravel folder and run the code from main directory.

If you want to remove the mapping from laravel public folder and run the application from the main directory there are below easy step which you use and got the success to run the laravel from main directory. 1. Change the server.php to index.php When I run the `php artisan server` command it procced the server using server.php file so we just do change it as index.php 2. Copy the .htaccess from the public to the main directory For redirection, we need  .htaccess file so we just copy the file from public folder to the main directory
Post a Comment
Read more