Building Custom “Loading..” Spinners In Lightning Components

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.

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.

<aura:attribute name="showSpinner" type="Bolean" default="false" />

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

<c:Spinner type="name" width="widthInPixel" height="heightInPixel" color="color" show="{!showSpinner} />

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.

component.set("v.showSpinner", true); //show the spinner
component.set("v.showSpinner", false); //hide the spinner (may be in an Apex callback)

 

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. )

<aura:attribute name="type" type="String" default="spears" />
<aura:attribute name="width" type="Integer" default="32" />
<aura:attribute name="height" type="Integer" default="32" />
<aura:attribute name="color" type="String" default="red" />
<aura:attribute name="show" type="Boolean" default="false" />
<aura:handler name="change" value="{!v.show}" action="{!c.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})

<div aura:id="spears" style='display:none'>
  <![CDATA[
     <svg  viewBox="0 0 30 30" width="wwww" height="hhhh" fill="cccc">
     ....
     </svg>
  ]]>
</div>
<div aura:id="bubbles" style='display:none'>
  <![CDATA[
     <svg  viewBox="0 0 30 30" width="wwww" height="hhhh" fill="cccc">
       ....
     </svg>
  ]]>
</div>

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

({ 
    afterRender: function(component, helper) { 
        var svg = component.find(component.get("v.type"));
        var width = component.get("v.width");
        var height = component.get("v.height");
        var color = component.get("v.color");
        var value = svg.getElement().innerText; 
        value = value.replace(/wwww/g, width); 
        value = value.replace(/hhhh/g, height); 
        value = value.replace(/cccc/g, color);
        svg.getElement().innerHTML = value;
       	helper.showHideSpinner(component); //note: we are keeping showHide in Helper
	}
})

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

//helper
showHideSpinner : function(component) {
   var svg = component.find(component.get("v.type"));
   if(component.get('v.show')) {
     svg.getElement().style.display = 'block';
   } else {
     svg.getElement().style.display = 'none';
  }
}

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

  //controller
   changeHandler : function(component, event, helper) {
	helper.showHideSpinner(component); 
   }
Published
June 18, 2015
Topics:

Leave your comments...

Building Custom “Loading..” Spinners In Lightning Components