Lightning spinner inside Button

I just came across this idea when I looked at some of the standard components by salesforce, for some reason they look way cooler.

I thought of sharing this with you...

We many a times try to use the spinner different ways, like, on the entire component, by blurring the whole area out, when I compare salesforce's components, they don't ALWAYS do that, they just show the spinner somewhere at the bottom/ top or just next to the button or disabling / replacing the button etc...

Well, when I cracked it, it looked amazing.

here is a simple component:

<aura:component >


<aura:attribute name="boooo" type="boolean" default="false"/>

<lightning:buttonGroup>

<lightning:buttonIcon iconName="utility:email" variant="brand" disabled="{!v.boooo}" onclick="{! c.handleClick }" alternativeText="Click to send Email" />

<lightning:button variant="brand" title="Brand action" disabled="{!v.boooo}" onclick="{! c.handleClick }" >
Disable me!
<aura:if isTrue="{!v.boooo}">
<lightning:spinner alternativeText="Loading" size="small" />
</aura:if>
</lightning:button>

</lightning:buttonGroup>

<div aura:id="msg" class="slds-transition-hide" style="display: inline;">
<div class="slds-text-color_success" style="display: inline;"> Done!</div>
</div>

</aura:component>

Controller:

({ handleClick : function(component, event, helper) {

component.set("v.boooo", !component.get("v.boooo"));
var div = component.find('msg');
//Show the success message after 3 seconds...
window.setTimeout($A.getCallback(function() {
if(component.isValid()) {
$A.util.addClass(div, "slds-transition-show");
component.set("v.boooo", !component.get("v.boooo"));
}
}), 3000);

//hide the success message after 3 seconds...
window.setTimeout($A.getCallback(function() {
if(component.isValid()) {
$A.util.removeClass(div, "slds-transition-show");
$A.util.addClass(div, "slds-transition-hide");
}
}), 6000);
}

})

CSS:

 .THIS.slds-transition-hide {
    transition: opacity 3s;
}