Salesforce Cookies #6

      1 Comment on 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 processing something on the server side (calling an 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 šŸ™‚

1 thought on “Salesforce Cookies #6

  1. Akash Pandey

    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

This site uses Akismet to reduce spam. Learn how your comment data is processed.