how to show a pinner when a lightning button is clicked?

Question

<aura:component controller="ZironNumbringOrdAPI" extends="c:LCC_GenericLightningComponent" implements="force:hasRecordId,force:lightningQuickAction" >
<aura:attribute name="recordId" type="string" default="false"/>
<aura:attribute name="partiallyConfirm" type="boolean" default="false"/>
<aura:set attribute="isAdditionalObject" value="false"></aura:set>
 <div>     
    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
        <aura:renderIf isTrue="{!v.partiallyConfirm}">
            <div class="slds-m-bottom_x-large">
                <span><lightning:icon iconName="utility:warning" size="small"/></span><span class="slds-m-left_xx-small">This Js Button has been partially migrated. Contact with your System Administrator to review the functionality.</span>
            </div>
        </aura:renderIf>
        <p>'Are you sure you would like to build Numbering order!'</p>
    </div>
    <footer class="slds-modal__footer">
        <lightning:button class="slds-button_neutral" onclick="{!c.yesRes}" label="Yes" />
        <lightning:button class="slds-button_brand" onclick="{!c.noRes}" label="No"/>
        <lightning:spinner aura:id="mySpinner" alternativeText="Processing.." title="Processing.." variant="brand" size="large" class="slds-hide"/>
    </footer>
</div>

</aura:component>

The spinner is not loading when clicked on the button. Can we also gray out the button as well?

      ({
 yesRes : function(component, event, helper) {
     console.log('just called:');   
     var action = component.get('c.OrderApi'); 
     c.find("mySpinner");
        action.setParams({
            "ordId" : component.get("v.recordId") 
        });
        action.setCallback(this, function(a){
            var state = a.getState();
            if(state == 'SUCCESS') {
               console.log('currency data is:' + JSON.stringify(a.getReturnValue()));               
                var responseval= a.getReturnValue();
               $A.get("e.force:closeQuickAction").fire();
               $A.get('e.force:refreshView').fire();
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    title : 'Message',
                    message:responseval,
                    duration:' 5000',
                    type: 'info'
        });
        toastEvent.fire();
            }
            else{
                    console.log("#### error = "+responseval);
                    helper.toastMessage(responseval, 'error');
                    $A.get("e.force:closeQuickAction").fire();
                }
        });
        $A.enqueueAction(action);
    },    
    noRes : function(component, event, helper) {              
        $A.get("e.force:closeQuickAction").fire();
    },
})

Answer 1

you should add the logic to switch the css class from 'slds-hide' to 'slds-show'

var spinner = component.find("mySpinner");
$A.util.removeClass(spinner, "slds-hide");
$A.util.addClass(spinner, "slds-show");

To hide the spinner remove 'slds-show' and add 'slds-hide' Read more on lightning:spinner - https://developer.salesforce.com/docs/component-library/bundle/lightning:spinner/documentation