Salesforce Cookies #6

Adding Loading Icon on the page for an AJAX Request ( ActionFunction, CommandButton)

It’s always good to add a loading icon on the page when you are proccessing something on server side (calling a apex method ), so a user can understand that something is running in the background. Following code snippet can be used along with your apex:actionFunction or apex:commandButton.

In Classic

<apex:actionStatus id="actionStatus">
  <apex:facet name="start" >
    <img src="/img/loading.gif" />

In Lightning Experience

<apex:actionStatus id="actionStatus">
  <apex:facet name="start" >
    <div class="slds-spinner_container">
      <div class="slds-spinner--brand slds-spinner slds-spinner--small" aria-hidden="false" role="alert">
        <div class="slds-spinner__dot-a"></div>
        <div class="slds-spinner__dot-b"></div>

Using ActionStatus in CommandButton

<apex:commandButton value="Save" action="{!Save}" status="actionStatus"/>

Happy Coding 🙂

One thought on “Salesforce Cookies #6

  1. Thanks for explaining the Action status.

    For Fancy Action status in classic-

    We need to add following css classes in your VF page code.

    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: fixed;
    display: block;
    opacity: 0.7;
    background-color: #fff;
    z-index: 10001;
    text-align: center;

    position: absolute;
    z-index: 10000;

    JavaScript function to start and stop action status –

    function onLoadingStatus(vl){
    function loading(val) {
    if (val) {
    document.getElementById(‘contentLoading’).style.display = ‘inline-block’;
    //document.getElementById(‘contentLoaded’).style.display = ‘none’;
    else {
    document.getElementById(‘contentLoading’).style.display = ‘none’;
    //document.getElementById(‘contentLoaded’).style.display = ‘inline-block’;

    And finally add action status tag in your VF page-

    Example Button –



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s