function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ravi_SFDCRavi_SFDC 

About Spinner

I am using lightning-spinner and normally we get the DOT as spinner. 

But my requirement is, i need to have my TEXT to loaded instead of the DOTs untill my data loaded on the page. Your help would be really appreciated.

Thanks & Regards
Ravi

 

RituSharmaRituSharma
You will need to create your a custom component for this.
Mohamed IthrisMohamed Ithris
Hi Ravi,
Not sure to possible to Remove the DOT rounded - But we can able to add the Text under the Spinners.

LWC CSS : 
.spins::after
{
position: absolute;
content: 'Fetching Fields of the Object......';
width: 100%;
text-align: center;
top: calc(50% + 3em);
font-weight: bold;
}

HTML : 
<template if:true={showLoadingSpinner}> <lightning-spinner class="spins" size="medium"></lightning-spinner> </template>

Thanks
Ravi_SFDCRavi_SFDC

Hi Mohamed,

I have got the solution in the same way, but my requirement is as below (referring to the below screen shot)
User-added image
1. The BLACK rectangle is my LWC Component

2. The RED rectangle is my LWC as child Component (this component has complete dynamic text content)  - i need the customize spinner with custom text

3. The GREEN rectangle is my LWC as child Component - i need the customize spinner with custom text

Your help would be really appreciated.

Thanks

Ravi