Lightning Spinner : Toast for LWC and Aura

Lightning Spinner : Aura Component

Aura Component : HTML

<aura:component>
    <aura:attribute name="loading" type="Boolean" default="true" />
    <div class="spinner">
        <aura:if isTrue="{!v.loading}">
            <lightning:spinner alternativeText="Loading" />
        </aura:if>
    </div>
</aura:component>

Aura Component : CSS

.THIS.spinner{
    position: relative;
    display: inline-block;
    width: 51px;
    vertical-align: middle;
    white-space: nowrap;
}

Lightning Spinner : Lightning Web Component

LWC : Template (HTML)

<template>
    <div class="spinner">
        <template if:true={loading}>
             <lightning-spinner alternative-text="Loading"></lightning-spinner>
        </template>
    </div>
</template>

Lightning Web Component : JS

import { LightningElement, track } from 'lwc';

export default class Spinner extends LightningElement {
    @track loading = true;
}

Lightning Web Component : CSS

.spinner{
     position: relative;
    display: inline-block;
    width: 51px;
    vertical-align: middle;
    white-space: nowrap;
}

Note : You can hide spinner from JS via set loading=false attribute in both framework.

Lightning Toast: Aura Component

Just needed Call Standard Event to show : $A.get("e.force:showToast");
Aura Component : HTML

<aura:component>
    <lightning:button label="Create Lead" variant="brand" onclick="{!c.createLead}" />
</aura:component>

Aura Component : JS

createLead : function(component, event, helper) {
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        "title": "Success!",
        "message": "Lead record created successfully."
    });
    toastEvent.fire();
}

Lightning Toast : Lightning Web Component

LWC : Template (HTML)

<template>
   <lightning-button
       label="Create Lead"
       onclick={createLead}>
   </lightning-button>
</template>

Lightning Web Component : JS

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
export default class createLead extends LightningElement {
    createLead() {
        const event = new ShowToastEvent({
            title: 'Create Lead',
            message: 'Lead record created successfully.',
        });
        this.dispatchEvent(event);
    }
}

Toast Note : Toast have multiple toast type like 'error', 'warning', 'success', or 'info'. It will show background color as per type like error is show 'Red' color.
Note: After save whole code you will drag and drop code into Lightning Record Detail Page

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!