+ Start a Discussion
santhoshgsanthoshg 

How to show loading image ajax while ajax call in visualforce?

Hi,

 

 

can any one send the code pls.

 

 

thankns

Ramesh

Dhaval PanchalDhaval Panchal

Try this,

 

Add below code in your vf page (before "Apex:Form" tag).

 

    <style>
        /* This is for the full screen DIV */
        .popupBackground {
            /* Background color */
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 20);
        
            /* Dimensions */
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 998;
            position: absolute;
            
            /* Mouse */
            cursor:wait;
        }
     
        /* This is for the message DIV */
        .PopupPanel {
            /* Background color */
            border: solid 2px #ffba1a;
            background-color: white;
     
            /* Dimensions */
            left: 50%;
            width: 200px;
            margin-left: -100px;
            top: 50%;
            height: 75px;
            margin-top: -25px;
            z-index: 999;
            position: fixed;
            
            /* Mouse */
            cursor:pointer;
        }
    </style>    
    <apex:actionStatus id="stSearch" stopText="">
        <apex:facet name="start">
            <div>
                <div class="popupBackground" />
                <div class="PopupPanel">
                    <table  border="0" bordercolor="red"  width="100%" height="100%">
                        <tr>
                            <td align="center"><b>Please Wait</b></td>
                        </tr>
                        <tr>
                            <td valign="center" align="center"><img src="{!$Resource.chatEm_Progressbar3}"/></td>
                        </tr>
                    </table>
                </div>
            </div>
        </apex:facet>
    </apex:actionStatus>

 and then see below code how I have used progress bar in command button.

 

    <apex:form id="myForm">
        <apex:pageBlock >
            <apex:pageBlockButtons location="top">
                <apex:commandButton action="{!importData}" value="Import to salesforce" reRender="myForm" status="stSearch"/>
            </apex:pageBlockButtons>
......................

 You can upload your progressbar image, as I have created static resource ({!$Resource.chatEm_Progressbar3}), give your static resource name here.

santhoshgsanthoshg

Thanks