LOADING ICON IN VISUALFORCE PAGE

When you develop a Visualforce page, many time you have some action in AJAX inside the page, in this case you need a loading icon. First you need to notify the user that the action is in progress and second you don’t want the user to trigger other action in the page since the previous one didn’t finish. Salesforce does not provide any visualforce component for doing this. So I will provide you a visualforce component that will solve this problem and that will be very easy to integrate to your page.The loading animation will look like that

Loading Animation

Define the Visualforce component

Let’s create a Visualforce component that will hold the loading icon on top of a div that will hide the page when loading is triggered. You don’t need any static resource for the icon since we are going to use standard Salesforce icons. Go to Setup -> Develop -> Component -> New. Name it “LoadingBox” and copy-paste this code:

<apex:component >

    <apex:actionStatus onstart="startLoading();" onstop="endLoading();" id="loadStatus"/>

    <style>

        .overlay {

            display: none;

            height: 100%;

            left: 0;

            position: fixed;

            top: 0;

            opacity: 0.3;

            -moz-opacity: 0.3;

            width: 100%;

            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";

            filter: alpha(opacity=30);

            background: #090909;

            -khtml-opacity: 0.3;

            z-index: 1000;

        }

        .loader {

            background: url('/img/loading32.gif') scroll no-repeat 0 0;

            width: 32px;

            height: 32px;

            position: absolute;

            left: 50%;

        }

    </style>

    <div id="load_scrl" class="loadingBox loader" style="display:none"> </div>

    <div class="loadingBox overlay"> </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

        function startLoading(){

            $('#load_scrl').css('top', $(document).scrollTop() + 200);

            $('.loadingBox').show();

        }

        function endLoading(){

             $('.loadingBox').hide();

        }

    </script>

</apex:component>




Integrate the component to your page

Now let’s say you have a Visualforce page with an ajax action, here is 2 ways to use this component but first add this code to the root of your visualforce page:

   <c:loadingbox />




The first and simplest option is to use the “status” attribute with the value “loadStatus”, for example if you have a commandbutton it will look like that:

<apex:commandButton action="!save}" value="AjaxButton" status="loadStatus" rerender="myForm"/>




It will start the loading animation with the Salesforce icon and then on finish the animation will stop and disappear.

The second option if you’re not using standard Visualforce components is to launch and stop the animation from the javascript. It is 2 simple calls:

startLoading();     //start the loading animation endLoading()       //stop the loading animation

The advantage of using those options is that you are improving the user experience, your loading animation will look like a Salesforce one and finally it is really easy to use.