Simple Loader image for Visualforce Page.

Hello guys,

I am gonna show you simple way to pop up loader image i.e status image for loading purpose using CSS and javascript function.

Using simple html div and Javascript you can create your status loader.

Below i am gonna show you simple html tag for it. you can call javascript function on onclick method to show loader and hide it on oncomplete.

ADD BELOW STYLE TO YOUR VF PAGE

#filter{ 
      display:none;
      background-image: url({!URLFOR($Resource.Static_Resource_Main,'Static_Resource_Main/loading32.gif')});
      z-index:10000;
      position:fixed;
      top:0%;left:0%;
      width:100%;
      height:100%;
      background-repeat:no-repeat;
      background-position:center;
      background-color: #ffffff;
      opacity:0.6;
      filter:alpha(opacity=50);
} 

Call startProces method when you call action( Controller function or any function after which you want to show loading image).

 

function startProcess()
{
      $('#filter').show();
}

function endProcess ()
{
      $('#filter').hide();
}   

Add below Div tag at the start of body tag or form.

<center>
    <div id="filter"></div>
</center>                        

startProcess will add display: block css to div.
endProcess  will hide the div.

Its just awsomeness of css.

Hope you will like it.
Enjoy coding....