function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Angel30Angel30 

visualforce component as spinner

Hi All,

There is a case where we need to create a generic vf component in order to show spinner.
The VF Component will be used as spinner in VF Page when certain actions takes some time. The Spinner will be displayed to user till the back end actions complete.
It would be great if anybody can help on this.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Deeps,

I trust you are doing very well.

Please refer to the below link with a sample code which might help you further with the above issue.

https://kevansfdc.blogspot.com/2017/02/nice-css-spinner-for-visualforce-pages.html

https://github.com/kevanmoothien/sfdc-spinner


I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in future.

Thanks and Regards,
Khan Anas
Angel30Angel30
Hi Anas,
 I tried understanding the solution, but its too lengthy..!!! :( :(
i am new to this, i would say i need a generic visualforce component of spinner that can be used in any vf page that was previously created.
It would be great if one can tell me how to use it in vf page as well!!! 

like wise i can go ahead with other component creation once i understand this.

Thanks a lot!
Angel30Angel30
Any suggestion??
 
Khan AnasKhan Anas (Salesforce Developers) 
Hi,

It is a generic component which has different types of the spinner. If you don't want all, you can remove it from the component or else just copy-paste the entire component code.
You just have to copy the spinner.component found in the folder "src/components". Add the code in a visualforce component name "spinner" or any other name. Then, include this visualforce component on the visualforce page you want to use the spinner. 

To display the spinner, a JavaScript code must be executed from visualforce page. 

km_spin(true); // to show the spinner
km_spin(false); // to hide the spinner

Like this: 
<apex:page >
    <apex:form>
        <c:Spinner spinner_name="wandering-cubes" spinner_color="red"/>
        <apex:pageBlock>
            <apex:commandButton value="Show" onclick="km_spin(true);" />
        </apex:pageBlock>
    </apex:form>
</apex:page>

There are various spinners in the component, you can choose any of them in spinner_name attribute. Also, you can choose a color in spinner_color attribute. 

These are some spinners name:

rotating-plane
wave
wandering-cubes
spinner-pulse
double-bounce
chasing-dots
three-bounce
circle
cube-grid
fading-circle
folding-cube


I hope it helps you.

Kindly mark this as solved if the information was helpful.

Thanks and Regards,
Khan Anas
Ajay K DubediAjay K Dubedi
Hi Angel, 

Below code can fullfill your requirements. Hope this will work for you.

Add the following snippet to your visualforce page:

<apex:actionStatus id="pageStatus">
    <apex:facet name="start">
        <apex:outputPanel >
            <img src="/img/loading32.gif" width="25" height="25" />
            <apex:outputLabel value="Loading..."/>
        </apex:outputPanel>            
    </apex:facet>
</apex:actionStatus>

Then, in your commandbutton or whatever element you have enabled to send an Ajax call, add the ‘status’ attribute and reference the ActionStatus Id that you used above:

<apex:commandButton action="{!doSomeAction}" rerender="rerenderId" status="pageStatus" value="Do Action"/>

Please mark this as best answer if this solves your problem.

Thank you
Ajay Dubedi