Display Loading/Wait image on Long Process using jQuery

If you are planning to display a logging image on a time consuming task on a web page then this post will help you in doing this. You can make this happen only by following below simple steps

Step 1 CSS

    .overlay {

    background: #e9e9e9; 

    display: none;       

    position: absolute;  

    top: 0;                 

    right: 0;               

    bottom: 0;

    left: 0;

    opacity: 0.5;

    }

  #loading-img {

    background: url(../Images/Loading.gif) center center no-repeat;/*Add the loading image that you want to show*/

    height: 100%;

    z-index: 20;

    }

Step 2 HTML

   

type="button" onclick="Process()" value="Process" class="btn btn-small btn-info" id="btnProcess" />

Step 3 jQuery

Function Process()

{

$(".overlay").show();

//Add your logic

$(".overlay").hide();

}