Using Actionstatus LoadPage in visualforce page

In the example below, we are using actionStatus for commandbutton.

When user will click on save buttton, request will go to controller method.

We are showing gif image to user while AJAX request is in progress using actionstatus component.

We are using apex:facet tag inside actionstatus to show image and we have specified name value as ‘start’ in apex:facet tag.

So It will show image when request is in progress.

We can also use ‘stop’ value in name attribute of apex:facet to specify message when request completes.

Apex Controller

public class actionStatusDisableImage {
    public Account account{get;set;}
    public actionStatusDisableImage(){
        account = new Account();
    }
    public Pagereference save(){
       // upsert account;
        ApexPages.addmessage(new ApexPages.message(ApexPages.severity.CONFIRM,'Record insert successfully'));
        return null;
    }
}

Visualforce Page

<apex:page controller="actionStatusDisableImage" tabStyle="Account">
    <apex:outputpanel >
        <apex:actionstatus id="actStatusId">
            <apex:facet name="start">
                <div class="waitingSearchDiv" id="el_loading" style="background-color: #DCD6D6;
                                                                     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">Saving...</span>
                    </div>
                </div>
            </apex:facet>
        </apex:actionstatus>
    </apex:outputpanel>
    <apex:form id="formId">
        <apex:pageBlock id="pgBlckId" title="Create New Account ">
            <apex:pageMessages />
            
            <apex:pageBlockButtons location="bottom">
                <apex:commandButton action="{!save}" value="Save" reRender="pgBlckId" status="actStatusId"/>
            </apex:pageBlockButtons>
            
            <apex:pageBlockSection id="pgBlckSecId" title="Account Page Information" collapsible="false">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.Phone}"/>
                <apex:inputField value="{!account.Type}"/>
                <apex:inputField value="{!account.Rating}"/>
                <apex:inputField value="{!account.Industry}"/>
                <apex:inputField value="{!account.site}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Output