Spinner for API call

[vin]

I need to show a spinner when i make a API call which takes few seconds to run.. I need to show a Image and text

Processing Please wait...

this.settingsservice.bulkUsers(o)

                .subscribe((data: any) => {

                    console.log("success add bulk user details", data);

                    this.ejDialog.hide();

                    if (data.failedUsers.length > 0) {                        

                            

                            this.toasts = [

                                { title: 'information !', content: 'Created with some errors. Please check..', cssClass: 'e-toast-info', timeOut: 0, showCloseButton: true }

                            ];

                        

                    } else {

                       

                        

                        this.toasts = [

                            { title: 'Success !', content: 'Successfully Updated.', cssClass: 'e-toast-success' }

                        ];

                    }

                    

                    this.element.show(this.toasts[0]);

                },

                    err => {

                        console.log("error", err);

                        this.toasts = [

                            {

                                title: 'Error !', content: 'An error occurred while submitting your data.', cssClass: 'e-toast-danger', timeOut: 0, showCloseButton: true

                            },

                        ];

                        this.element.show(this.toasts[0]);

                    }

                );

[Indrajith Srinivasan]

Hi Vin, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. Yes, you can show spinner during the API call. You can create the spinner in the ngOnInit and call the showSpinner method. After the return of the API call, you can call hideSpinner method to hide the spinner. We have prepared a sample with the spinner shown before the Call and hidden once the data is fetched.

Sample: https://stackblitz.com/edit/angular-nvf4zk-bqcfw6?file=app.component.ts 

 

Can you please check the above sample and let us know if it meets your requirements?

Regards, 

Indrajith 

[vin]

Thanks
Is there a way to show the spinner and text  clearly and have a light background and a border?

it is  on top of dialog

<ejs-dialog id='dialogUpload' #ejDialogUpload isModal='true' [visible]='visibleUpload' header=''>

[Indrajith Srinivasan]

Hi Vin, 

 

Thanks for the update, 

 

We have validated your reported query. Yes, you can set the background and border for the spinner element using the CSS styles applied for the spinner elements. And make the label text clear by setting the font-size. We have also modified the sample shared yesterday, by showing the spinner over the dialog. 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-psjsdx?file=index.html

CSS style 

 

.e-spinner-pane .e-spinner-inner { 

    background: azure; 

    border: 1px solid darkgray; 

} 

.e-spinner-pane .e-spinner-inner .e-spin-label {  

  font-size: 18px; 

} 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[vin]

it is not applying the style for some reason

this is the rendered HTML

I applied the css as suggested

.e-spinner-pane .e-spinner-inner { 

    background: azure; 

    border: 1px solid darkgray; 

} 

.e-spinner-pane .e-spinner-inner .e-spin-label {  

  font-size: 18px; 

} 

<div _ngcontent-qul-c4="" class="" id="spinner">

    <div class="e-spinner-pane e-spin-show">

        <div class="e-spinner-inner">

            <svg class="e-spin-material" id="pMR7E" viewBox="0 0 30 30" style="height: 30px; width: 30px; transform-origin: 15px 15px 15px;"><path class="e-path-circle" d="M15,1.5A13.5,13.5 0 1 1 1.5,15" stroke-width="3" stroke-dasharray="63.61725123519331" stroke-dashoffset="188.47473796252717" transform="rotate(-180 15 15)"></path>

            </svg>

            <div class="e-spin-label">Processing Please wait...</div>

        </div>

    </div>

</div>

[Indrajith Srinivasan]

Hi Vin,

Good day to you,

We have validated your reported query. We suspect the defined CSS style is not applied for the spinner, hence it doesn’t make any effect in your application.

Can you share us the following details, 

• Does the above-shared sample meet your requirements?
• Can you please share us the details of where the styles are added in your application?
• If possible, replicate the issue in the last shared sample and revert back to us.

 

Regards, 

Indrajith 

[vin]

i moved the css to root then it started working

[Indrajith Srinivasan]

Hi Vin,

Thanks for the update,

We are glad that your reported issue is resolved. Please let us know if you need any further assistance.

Regards, 

Indrajith