+ Start a Discussion
kminevkminev 

How to show gif spinner while doing something on vforce page

Hi,

 

I would like to be able to show a gif spinner on my visual force page as I am doing something on the background like loading data or waiting for data to come back before I update the page.

 

It will be ideal if I can replace apex:tags with a stylesheet that will be turned off or on based on user click.

 

 

Does anyone have a good solution for that I ma not very ajax savvy per say so any ideas will be appreciated.

 

 


Thank you. 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

You'll need to use start/stop facets.  The example below is taken from one of my pages.  When the user clicks the button inside the stop facet, the button is replaced with the text 'Working...' until the action is complete.

 

Simply add the components you wish to replace in the stop facet, and put the image you wish to display in the start facet. 

 

 

<apex:actionStatus id="AddStatus">

<apex:facet name="start">

<apex:outputText value="{!$Label.StatusWorking}"/>

</apex:facet>

<apex:facet name="stop">

<apex:commandLink action="{!add}" value="{!$Label.ButtonAdd}" styleClass="btn" status="AddStatus" rerender="addsection,ListView,messages"/>

</apex:facet>

</apex:actionStatus>

 

 

 

 

 

Message Edited by bob_buzzard on 10-19-2009 07:49 AM

All Answers

GoodGrooveGoodGroove

Checkout the actionstatus component, provides what you need

 

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#StartTopic=Content/pages_compref_actionStatus.htm

 

 

kminevkminev

I have an apex:outputpanel tag and I need to basically replace this whole content with a gif imamge spinner.

 

The actionStatus controll seem to allow you to use text as indication of loading. I also tried with my css class.

 

Any advice will be appreciated.

 

Please see code below:

 

 

 

<apex:page controller="exampleCon"> <style> #loading { width:100%; height: 100%; position: fixed; top: 50%; left: 50%; background:url(https://tapp0.salesforce.com/resource/1255731794000/Ajax_Loader_Gif) no-repeat center #fff; text-align:center; padding:10px; font:normal 16px Tahoma, Geneva, sans-serif; border:1px solid #666; margin-left: -50px; margin-top: -50px; z-index:2; overflow: auto; } </style> <apex:form id="testForm" > <apex:outputPanel layout="block" style="width:100%; height:300px; overflow:autol position:relative;"> <apex:outputText value="This is my test which should be replaced by a spinner"/> </apex:outputPanel> <apex:commandButton title="Start" value="Start" action="{!start}" status="counterStatus" id="button" rerender="counterStatus"> </apex:commandButton> <apex:actionStatus startStyleClass="loading" stopText=" Done " id="counterStatus" /> </apex:form> </apex:page> Control: public class exampleCon { Integer count = 0; public double counter {get; set; } public boolean showStatus {get; set; } public PageReference incrementCounter() {count++; return null; } public Integer getCount() { return count; } public pageReference start() { counter = 0; showStatus = true; for (integer y = 0; y < 5; y++) { for (integer n = 0; n < 30000; n++) { counter++; } } showStatus = false; return null; } }

 

 

bob_buzzardbob_buzzard

You'll need to use start/stop facets.  The example below is taken from one of my pages.  When the user clicks the button inside the stop facet, the button is replaced with the text 'Working...' until the action is complete.

 

Simply add the components you wish to replace in the stop facet, and put the image you wish to display in the start facet. 

 

 

<apex:actionStatus id="AddStatus">

<apex:facet name="start">

<apex:outputText value="{!$Label.StatusWorking}"/>

</apex:facet>

<apex:facet name="stop">

<apex:commandLink action="{!add}" value="{!$Label.ButtonAdd}" styleClass="btn" status="AddStatus" rerender="addsection,ListView,messages"/>

</apex:facet>

</apex:actionStatus>

 

 

 

 

 

Message Edited by bob_buzzard on 10-19-2009 07:49 AM
This was selected as the best answer
IC-TannerIC-Tanner
Was just about to post the same question. Thanks for the solution!
goabhigogoabhigo

Cool Bob, great help. Thanks.

huo.cheasarathuo.cheasarat

 first u must have component like this.

 

 

<apex:component >
<!-- Attribute Definitions -->
<apex:attribute name="BorderColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="Width" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="Height" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BackColor" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="BorderSize" type="String" required="true" description=""></apex:attribute>
<apex:attribute name="ImageUrl" type="String" required="false" description=""></apex:attribute>
<apex:attribute name="Message" type="String" required="false" description=""></apex:attribute>
<apex:attribute name="messageStyle" type="String" required="false" description="Message inline style"></apex:attribute>
<apex:attribute name="BorderStyle" type="String" required="false" description="Message box border style: solid, outset, inset, etc"></apex:attribute>

<div id="salesforceSource_blurybackground" style="position:absolute; left:1px; top:1px; width:100%; height:100%; text-align:center; vertical-align: middle; background-color: #dcdcdc; opacity:0.6;filter:alpha(opacity=60)">
</div>
<div id="salesFroceSource_StatusBox" style="position:absolute; left:100px; top: 100px;width: {!Width}; height:{!Height}; opacity:1;filter:alpha(opacity=100)">
<table border="{!BorderSize}" cellpadding="0" cellspacing="0" style="border-left-color: {!BorderColor};
border-bottom-color: {!BorderColor}; width: {!Width}; border-top-color: {!BorderColor}; height:{!Height};
border-right-color:{!BorderColor}; border-style:{!BorderStyle}; background-color:{!BackColor};">
<tr>
<td align="left" valign="top">
<table border="0" cellpadding="4" cellspacing="0" style="width: 100%; height: 100%">
<tr>
<td style="border-bottom-color:{!BorderColor}; border-bottom-width:1px; border-bottom-style:solid;vertical-align:middle;">
</td>
<td style="border-bottom-color:{!BorderColor}; border-bottom-width:1px; border-bottom-style:solid;vertical-align:middle;{!messageStyle}">
&nbsp;{!Message}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var AgreementForm = document.getElementById("salesforceSource_blurybackground");
AgreementForm.style.height = document.body.clientHeight  + "px";
AgreementForm.style.width = window.screen.availWidth + "px";

var ContainerElem = document.getElementById("salesFroceSource_StatusBox");
//ContainerElem.style.display = "block";
AlignToCenter(ContainerElem);

function AlignToCenter(Element)
{
var availableHeight = 0;
var availableWidth = 0;
if (Element.ownerDocument)
{
var docElement = Element.ownerDocument.documentElement;
availableHeight = parseInt(docElement.clientHeight);
if (availableHeight == "NaN") availableHeight = 0;

availableWidth = parseInt(docElement.clientWidth);
if (availableWidth == "NaN") availableWidth = 0;
}

if (availableHeight == 0 || availableHeight == "NaN")
availableHeight = window.screen.availHeight - 200;
if (availableWidth == 0 || availableWidth == "NaN")
availableWidth = window.screen.availWidth - 100;

var msgBoxTop = parseInt((availableHeight - parseInt(Element.clientHeight))/2);
var msgBoxleft = parseInt((availableWidth - parseInt(Element.style.width))/2);

if (msgBoxTop == "NaN" || msgBoxTop == 0)
msgBoxTop = 100;

Element.style.left = msgBoxleft + "px";
Element.style.top = msgBoxTop + "px";
}
</script>
</apex:component>

 

 

then in apex page u can call it:

<apex:page controller="TestControler">

                    <apex:form  id="theForm">

                   <apex:commandButton value="Save" action="{!saveAccount}" reRender="theForm" status="status"/>

 

 <apex:ActionStatus id="status" >
        <apex:facet name="start">
            <c:Load BackColor="#efefef" borderColor="#efefef" borderSize="3" height="50px" width="180px" Message="Pleas wait" messageStyle="color:darkred;font-size:10pt;font-family:arial;font-weight:bold;" ImageUrl="/img/loading.gif"/>
        </apex:facet>
    </apex:ActionStatus>

  </apex:form >

</apex:page>

 

public class TestController{

 

       public Pagereference saveAccount(){

 

                     return null;

       }

 

 

}


Please Enjoy :smileyhappy:

 

vagishvagish

hey nice component  !! :smileyhappy:

MattMet86MattMet86
@huo.cheasarat - I am getting an error message of componenet c:load does not exist when I try and put your code into my VF page. Any ideas? 
 
sameer kulakarnisameer kulakarni
how to put loader on load of vf page ?