Visualforce Action Status with background loading image.

Visualforce Action Status with background loading image.

When a user carries out an action that results in a Visualforce form submission, for example,clicking a button, it can be useful to render a visual indication that the submit is in progress.Without this a user may click on the button again, or assume there is a problem and navigate away from the page. The standard Visualforce <apex:actionStatus /> component can display messages when starting and stopping a request, but these messages are easily missed, especially if the user is looking at a different part of the page.

In the below example, we will create a Visualforce page that allows a user to create a case sObject record utilizing the case standard controller. When the user clicks on the button to create the new record, a spinner GIF will be displayed. In order to ensure that we have the user's full attention, the page will be grayed out while the submit takes place.


Visualforce :

<apex:page standardController="Case">
  <style>
    #spinner{
        display: none;
        width:200px;
        height: 50px;
        position: fixed;
        top: 50%;
        left: 50%;
        text-align:center;
        padding:10px;
        font:normal 16px Tahoma, Geneva, sans-serif;
        margin-left: -100px;
        margin-top: -100px;
        z-index:2;
        overflow: auto;
        border:1px solid #CCC;
        background-color:white;
        z-index:100;
        padding:5px;
        line-height:20px;
     }
     #opaque {
         position: fixed;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%;
         z-index: 1;
         display: none;
         background-color: gray;
         filter: alpha(opacity=30);
         opacity: 0.3;
         -moz-opacity:0.3;
         -khtml-opacity:0.3
     }
     * html #opaque {
         position: absolute;
     }
  </style>

  <apex:form >
  
    <apex:pageMessages id="msgs" />
    <apex:pageBlock mode="mainDetail" title="Create Case">
     
      <apex:pageBlockButtons >
        <apex:commandButton value="Save" action="{!save}" onclick="showSpinner()" />
        <apex:commandButton value="Cancel" action="{!cancel}" onclick="showSpinner()" />
      </apex:pageBlockButtons>
      
      <apex:pageBlockSection title="Details" columns="1">
        <apex:inputField value="{!Case.Subject}" />
        <apex:inputField style="width:80%" value="{!Case.Description}" />
      </apex:pageBlockSection>
      
      <apex:pageBlockSection >
        <apex:inputField value="{!Case.AccountId}" />
        <apex:inputField value="{!Case.Type}" />
        <apex:inputField value="{!Case.Priority}" />
        <apex:inputField value="{!Case.Status}" />
        <apex:inputField value="{!Case.Origin}" />
        <apex:inputField value="{!Case.Reason}" />
      </apex:pageBlockSection>
      
    </apex:pageBlock>    
  </apex:form> 
   <div id="opaque"/>
   <div id="spinner">
        <p align="center" style='{font-family:"Arial", Helvetica, sans-serif; font-size:20px;}'><apex:image value="/img/loading.gif"/>&nbsp;Please wait</p>
   </div>
   
   <script>
    function showSpinner()
    {
       document.getElementById('opaque').style.display='block';
       var popUp = document.getElementById('spinner');
      
       popUp.style.display = 'block';
    } 
   </script>

</apex:page>


once you enter all the details click on the save button the visualforce page status message is going to display with loading image background with in the div.

More about visualforce example and tags

http://sfdcsrini.blogspot.com/2014/06/visualforce-form-tags-with-examples.html

Posted in: action status with div and image. Action Status with loading image in <apex:actionStatus>,Salesforce,Salesorce,Visuaforce example,Visualforce,Visualforce Action Status with background loading image