Add spinner and disabled backgound

[Unknown]

Hello, 

I would like to add a spinner in my application. 

It works if I add createSpinner and showSpinner.

But I would like to prevent user to click outside the spinner like an overlay backgound. 

How can I do it ? 

thx

[Suwathi Dhakshanamoorthy]

Hi Foulont, 

 

 

Greetings from Syncfusion support. 

 

 

We can achieve your requirement “prevent outside access while the spinner is displaying with overlay background” using cssClass 'e-spin-overlay' in `createSpinner` method.  

We prepared the sample based on your requirements and updated below. 

Sample: https://stackblitz.com/edit/angular-ezj7qs-twyseq?file=package.json 

Please refer to the above sample and confirm whether it meets your requirements. 

 

Regards, 

Suwathi 

[PRIYA MODAK]

Hi Syncfusion Team,

I would like you to ask that if I want to set the spinner at the center of the screen and while spinning the fullscreen mode should not be enabled. I mean, while spinner is on the screen all other items on the screen should not be enabled for selection or any other kind of editing. I tried to implement as above you suggested but that's not working. Please suggest how should I implement for this in my application.

Thanks and Regards,

Priya Modak

[Kokila Poovendran]

Hi Foulont Gaetan,

You can achieve your requirement using cssClass 'e-spin-overlay' in `createSpinner` method.  Please find the code snippet and sample attached for your reference.

 createSpinner({

      // Specify the target for the spinner to show

      target: document.getElementById('container') as any,

      cssClass: 'e-spin-overlay',

    });

Sample: 

https://stackblitz.com/edit/angular-za9tpj-s52fqh?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fapp.component.css

Regards,

Kokila Poovendran.

BS