How to make a full screen progress spinner to block any input?

How to make a full screen progress spinner to block any input?

  

I've seen a couple apps did this, it shows a blocking full-screen transparent & darkened background with center spinning progress icon (css).

Is there any pattern in SilkUI to do this?

Thanks.

Hi Harlin.

It is as simple as to have behind the spin a container (div) that has a background color (like black) and some transparency (like 0.5). Add style to it to attach to the full screen (position:fixed; top:0;bottom:0;left:0;right:0; and maybe a z-index smaller than the one of the spinner) and voualá, you have your mask behind the spinner :)

Cheers,
Eduardo Jauch

Hi Harlin,

You can use "FullScreenAjaxWait" .





Regards

-SK-

Eduardo Jauch wrote:

Hi Harlin.

It is as simple as to have behind the spin a container (div) that has a background color (like black) and some transparency (like 0.5). Add style to it to attach to the full screen (position:fixed; top:0;bottom:0;left:0;right:0; and maybe a z-index smaller than the one of the spinner) and voualá, you have your mask behind the spinner :)

Cheers,
Eduardo Jauch

Why wasn't there any component for this already?

This was used commonly.

I thought it was already in SilkUI Mobile Patterns.


Sorry, I forgot to mention, this was for mobile apps.

Shashi kant Shukla wrote:

Hi Harlin,

You can use "FullScreenAjaxWait" .





Regards

-SK-

Sorry, I forgot to mention, this was for mobile apps.

So I cannot use Full Screen AJAX Wait.

Hi Harlin,

I don't know why it is not a component yet (for mobile). Maybe there is?

The idea I gave will work on mobile also. Probably without any change.

Cheers

Eduardo Jauch


Solution

Eduardo Jauch wrote:

Hi Harlin,

I don't know why it is not a component yet (for mobile). Maybe there is?

The idea I gave will work on mobile also. Probably without any change.

Cheers

Eduardo Jauch


Hello Eduardo,


Now we have a component for the same.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=2894

Thanks to your input. :)


Harlin, have a look at it.

https://atul8255.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/FullScreenSpinner/HomeScreen?_ts=636474000515769158


Hope this helps the community :)


Thanks and Regards,
Atul Patel

Solution


That was fast Atul!

Thank you for the component and feedback!

Daniel Martins wrote:


That was fast Atul!

Thank you for the component and feedback!

Thanks Daniel for you appreciation.


It was fast because of our top notch Outsystem's community :)


Atul Patel

Well done, Atul :) 

Nice! We will need something like that soon. Will have a look in a few days :) 

Thank you for sharing.

Atul Patel wrote:

Eduardo Jauch wrote:

Hi Harlin,

I don't know why it is not a component yet (for mobile). Maybe there is?

The idea I gave will work on mobile also. Probably without any change.

Cheers

Eduardo Jauch


Hello Eduardo,


Now we have a component for the same.

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=2894

Thanks to your input. :)


Harlin, have a look at it.

https://atul8255.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/FullScreenSpinner/HomeScreen?_ts=636474000515769158


Hope this helps the community :)


Thanks and Regards,
Atul Patel

Thanks, nice component... 

It will be great help for many... 


Thanks Eduardo/Daniel/Harlin/Miguel/  :)


It always feels delighting to hear appreciations from our seniors :)

Hi guys,

New forge component:

https://www.outsystems.com/forge/component/3047/fullscreenwaitspinner/

Now you can set the spinner to be shown in the begining of your action and hide it, in the end.

Hope it helps you!