Reading list Switch to dark mode

    How to implement loading sign in lightning component salesforce

    Updated 10 February 2017

    In this blog we will learn how to implement loading sign in lightning component. You can refer to the code below:

    loading sign in lightning component

    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();
        }
    })

    output

    Here is the output –

    Searching for an experienced
    Salesforce Company ?
    Find out More

    loading sign in lightning component

    Support

    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/

     

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home

    Table of Content