Here’s a quick and easy way to add a spinner to a Visualforce page for when a user invokes an asynchronous action on a page and is waiting for an element to rerender.

Add the following snippet to your visualforce page:

<apex:actionStatus id="pageStatus">
    <apex:facet name="start">
        <apex:outputPanel >
            <img src="/img/loading32.gif" width="25" height="25" />
            <apex:outputLabel value="Loading..."/>
        </apex:outputPanel>            
    </apex:facet>
</apex:actionStatus>

Then, in your commandbutton or whatever element you have enabled to send an Ajax call, add the ‘status’ attribute and reference the ActionStatus Id that you used above:

<apex:commandButton action="{!doSomeAction}" rerender="rerenderId" status="pageStatus" value="Do Action"/>

In the <img> tag in the ActionStatus panel, the reference to “/img/loading32.gif” is a standard image resource used by Salesforce.  For a ‘best practice’ scenario, you’ll want to download this and make it a static resource in your org.  The method shown above is a quick and dirty version that achieves the same results.

The final rendered spinner will look like this:

 Loading…