Nice css spinner for Visualforce pages

Did it ever happen that you have design a nice looking Visualforce page and had to insert a loading icon but didn't want to use the one provided by Salesforce (see image below)?

Well it happened to me a lot of time that I needed to find a reusable piece of code for a loading/spinner icon. Doing some research I found a that this guy, Tobias Ahlin, has come up with a SpinKit (https://github.com/tobiasahlin/SpinKit). So I decided to make a reusable component for having different kind of spinner with customize colors.

It is pretty easy to use, just need to copy the component on your Salesforce environment and execute some JavaScript whenever you want to toggle on and off the spinner/loading.

Source code can be found here: https://github.com/kevanmoothien/sfdc-spinner



The result should look something like that:

A live demo of all the spinners is available at: http://tobiasahlin.com/spinkit/

Hope you like this tutorial.

If you have any suggestions on how to improve this component, I will be glad to hear them.

Cheers!!

Installation

Click on the link below and add the codes in a visualforce component name "spinner" or any other name that sound best for you

https://raw.githubusercontent.com/kevanmoothien/sfdc-spinner/master/src/components/spinner.component

Basic usage

Include the Visualforce component on the Visualforce page you want to use the spinner/loading like in the code below.

<apex:page>
  <c:spinner />
</apex:page>

Displaying the spinner

To display the spinner, a JavaScript code must be executed. Here are the code

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

Advanced usage

Customizing the spinner

You can further customize the Spinner by adding some attributes such as in the code below:

<apex:page>
    <c:spinner spinner_name="wave"  spinner_color="red" />
</apex:page>

Possible value for "spinner_name" are:

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

Value for "spinner_color" is a hex or html color name