In this blog we’ll see how easy it is to use Lightning Components framework build a “Spinner” component that provides 7 different types of “Loading…” indicators. This component can then be easily be used in any other Lightning app to give visual clue to users whenever it makes an Apex call.

Below gif shows 7 different types of spinners that you can use. You can change color and size of any of them. These are SVG spinners and are from this Github repo.

Usage:

1. Have an attribute to show or hide the spinner.

2. Add the below code to where ever you want to show the spinner in your app.

Note: “name” attribute value can be: bars, spears, bubbles, spin, cyclone, cubes or spokes.

3. In your controller or Helper, simply toggle the “showSpinner” attribute to true or false.

Installing The Example App:

1. Install the unmanaged package
2. Open /c/SpinnerApp.app

How It’s Built:

1. Internally the component has the following attributes and a handler to listen to value change (changeHandler. )

2. The component also has all 7 SVG code like below. At any given point in time, only one of the divs with corresponding SVG is displayed (based on {!v.type})

3. And when the component is loaded, we use afterRender to set color, size and type of the component.

4. We use Helper’s showHideSpinner to toggle the spinner

5. Finally, when the the user changes the show attribute’s value, we use changeHandler to call Helper to again toggle the spinner.