Learn Salesforce Lightning (Create Records using Lightning Components) Along with Spinner Loader on button Click

Create Lightning Component :

<aura:component controller ="CreateCandidateRecordYY" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
                            force:hasRecordId,forceCommunity:availableForAllPageTypes"
                access="global">
   <!-- <ltng:require styles="/resource/bootstrap/css/bootstrap.min.css"
                  scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>-->
    <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="candidate" type="Candidate__c" default="{'sobjectType': 'Candidate__c','First_Name__c': '','Last_Name__c': '','Email__c': '','SSN__c': ''}"/>
    <aura:attribute name="Spinner" type="Boolean" default="false"/>
    <aura:if isTrue="{!v.Spinner}" >
        <div class="slds-spinner_container">
            <div role="status" class="slds-spinner slds-spinner--medium slds-spinner--brand">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>
    <Center>
    <div class="container-fluid">
        <h3>Please Enter The Candidate Information</h3>
        <div class="form-group">
            <label>First Name</label>
            <ui:inputText class="form-control" value="{!v.candidate.First_Name__c}"/>
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <ui:inputText class="form-control" value="{!v.candidate.Last_Name__c}"/>
        </div>
        <div class="form-group">
            <label>Email Address</label>
            <ui:inputText class="form-control" value="{!v.candidate.Email__c}"/>
        </div>
        <div class="form-group">
            <label>Emp Number</label>
            <ui:inputText class="form-control" value="{!v.candidate.SSN__c}"/>
        </div>
    </div>
    <div class="col-md-4 text-center">
       <ui:button class="slds-button slds-button--neutral" press="{!c.create}">Create</ui:button>
  </div>
    </Center>
</aura:component>

Create Lightning Controller:

({
    create : function(component, event, helper) {
        console.log('Create record');
       
        //getting the candidate information
        var candidate = component.get("v.candidate");
       
        //Validation
        if($A.util.isEmpty(candidate.First_Name__c) || $A.util.isUndefined(candidate.First_Name__c)){
            alert('First Name is Required');
            return;
        }           
        if($A.util.isEmpty(candidate.Last_Name__c) || $A.util.isUndefined(candidate.Last_Name__c)){
            alert('Last Name is Rqquired');
            return;
        }
        if($A.util.isEmpty(candidate.Email__c) || $A.util.isUndefined(candidate.Email__c)){
            alert('Email is Required');
            return;
        }
        if($A.util.isEmpty(candidate.SSN__c) || $A.util.isUndefined(candidate.SSN__c)){
            alert('SSN is Required');
            return;
        }
        //Calling the Apex Function
        var action = component.get("c.createRecord");
       
        //Setting the Apex Parameter
        action.setParams({
            candidate : candidate
        });
       
        //Setting the Callback
        action.setCallback(this,function(a){
            //get the response state
            var state = a.getState();
           
            //check if result is successfull
            if(state == "SUCCESS"){
                //Reset Form
                var newCandidate = {'sobjectType': 'Candidate__c',
                                    'First_Name__c': '',
                                    'Last_Name__c': '',
                                    'Email__c': '',
                                    'SSN__c': ''
                                   };
                //resetting the Values in the form
                component.set("v.candidate",newCandidate);
                alert('Record is Created Successfully');
            } else if(state == "ERROR"){
                alert('Error in calling server side action');
            }
        });
       
        //adds the server-side action to the queue       
        $A.enqueueAction(action);

    },
   
    showSpinner: function(component, event, helper) {
       // make Spinner attribute true for display loading spinner
        component.set("v.Spinner", true);
   },
   
 // this function automatic call by aura:doneWaiting event
    hideSpinner : function(component,event,helper){
     // make Spinner attribute to false for hide loading spinner   
       component.set("v.Spinner", false);
    }
})

 Create Apex Controller:

public class CreateCandidateRecordYY {
    @AuraEnabled
    public static void createRecord (Candidate__c candidate){
       
        try{
            System.debug('My Record===>'+candidate);
           
            if(candidate != null){
                insert candidate;
            }
           
        } catch (Exception ex){
           
        }
       
    }   
} 

Create Lightning Application:

<aura:application extends="force:slds">
    <aura:dependency resource="c:LighteCreate" />
    <c:LighteCreate />
</aura:application>

Click Update Preview Button :