Visualforce actionStatus Component using the salesforce animated gif

In this post I will show a example of how to use salesforces animated gif and the visualforce actionStatus component to represent a loading screen to the user. This can be very beneficial if you have a tab panel to switch in between tabs, or if you are rerendering a pageBlockTable etc.. This visual stimulation is much more appealing than a blank white screen or just a static screen that is populating asynchronously, which could confuse or frustrate a user into clicking off the screen.

Here is the markup

<div style="position: relative;">
    <apex:outputpanel>
        <apex:actionstatus id="status">
            <apex:facet name="start">
                <div class="waitingSearchDiv" id="el_loading" style="background-color: #fbfbfb;
                       height: 100%;opacity:0.65;width:100%;">
                    <div class="waitingHolder" style="top: 74.2px; width: 91px;">
                        <img class="waitingImage" src="/img/loading.gif" title="Please Wait..." />
                        <span class="waitingDescription">Loading...</span>
                    </div>
                </div>
            </apex:facet>
        </apex:actionstatus>
    </apex:outputpanel>
     
    <apex:pageblocktable columns="2" id="pbtTable1" value="{!someList}" var="pg">
        <apex:column headervalue="Action" styleclass="actionColumn" />
        <apex:column headervalue="Item Name" value="{!pg.Name}" />
    </apex:pageblocktable>
</div>




So looking at the markup above, the outter div is a wrapper that contains everything inside the area you are wishing to show the actionStatus, it is has a position of relative to allow for the animated gif and "Loading..." text to be positioned appropriately down from the top of the wrapper on top of all other elements. Then the rest is self explanatory, the actionStatus is given a Id which is used to call from the action or button click that will invoke the asynchronous action and start the loading visualization. The animated gif is simply used by referencing the appropriate path to the salesforce css file structure where the image is kept. From here you can be creative and build on this example for many other situations.