How to implement loading sign in lightning component salesforce

Here is the code :

Component –

<aura:component access="global">
        <!-- 
        /**
        * Webkul Software.
        *
        * @category  Webkul
        * @author    Webkul
        * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
        * @license   https://store.webkul.com/license.html
        */
        -->
        <ui:spinner aura:id="spinner"/>
        <ui:button press="{!c.toggleSpinner}" label="Toggle Spinner" />
</aura:component>

Controller –

({
    /**
     * Webkul Software.
     *
     * @category  Webkul
     * @author    Webkul
     * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
     * @license   https://store.webkul.com/license.html
     **/
    toggleSpinner: function(cmp) {
        var spinner = cmp.find('spinner');
        var evt = spinner.get("e.toggle");
        
	if(!$A.util.hasClass(spinner, 'hideEl')){
	    evt.setParams({ isVisible : false });
	}else {
	    evt.setParams({ isVisible : true });
	}
        evt.fire();
    }
})

Here is the output –

That’s all for how to implement load sign in lightning component, still have any issue feel free to add a ticket and let us know your views to make the code better https://webkul.uvdesk.com/en/customer/create-ticket/