Action Status in Visualforce

ActionStatus visualforce component displays the status of an AJAX update request. An AJAX request can either be in progress or complete. 

In simple words, I could say that this tag is used in visualforce to inform the user that the process is in action.

In many scenarios, the AJAX request takes some time. So we should display some message to the user, that your request is in progress with a meaningful message so that the user can understand the scenario and should not press the button multiple times making unnecssary calls to the server.

We can also show some gif images or other images to inform the user that the process is in progress and the user should wait for it to get completed.

In the example below, I have a method that increments the counter variable by one each time the command button is pressed. In this case, we are using the actionStatus tag in visualforce to inform the user that as soon as the button is pressed the method calling is initiated and will take some time to complete.

Visualforce Page:

<apex:page controller="ActionStatusDemo" tabStyle="Account" >
    <apex:form >
        <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">Please Wait...</span>
            <apex:pageBlock >
                <apex:pageBlockSection id="pageId" title="The Count Value will increment and incrementCounter() method will get called everytime you will press the button" collapsible="false">     
                    <apex:outputLabel style="font-weight: bolder;" value="Count Value" for="counter"/>
                    <apex:outputText style="font-weight: bolder;color: blue;" value="{!counter}"></apex:outputText>
                <apex:pageBlockButtons location="bottom">     
                    <apex:commandButton value="Increment Counter" action="{!incrementCounter}" status="status" reRender="pageId"/>

Apex Code:

public with sharing class ActionStatusDemo {
    //variable to reRender
    public Integer counter{get;set;}
    public ActionStatusDemo()
        counter = 0;
    // method to increment the counter
    public void incrementCounter()