Sample Code:
<apex:page controller=”Sample”>
<apex:actionstatus id=”counterStatus”>
<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: 100px; width: 91px;”>
<img class=”waitingImage” src=”/img/loading.gif” title=”Please Wait…” />
<span class=”waitingDescription”>Loading…</span>
</div>
</div>
</apex:facet>
</apex:actionstatus>
<apex:form id=”frm”>
<apex:commandButton value=”Test” status=”counterStatus” reRender=”frm”/>
</apex:form>
</apex:page>
Output:
<apex:page controller=”Sample”>
<apex:actionstatus id=”counterStatus”>
<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: 100px; width: 91px;”>
<img class=”waitingImage” src=”/img/loading.gif” title=”Please Wait…” />
<span class=”waitingDescription”>Loading…</span>
</div>
</div>
</apex:facet>
</apex:actionstatus>
<apex:form id=”frm”>
<apex:commandButton value=”Test” status=”counterStatus” reRender=”frm”/>
</apex:form>
</apex:page>
Output:
