How to add a gif 'loading' as a screen mask

 

Many times, when procedures that take time are run, the browser screen is grayed out until the procedure is complete. In these cases, it is interesting to add an image or gif indicating that said procedure is being 'loaded'. This allows interaction and communication with the user.

 

With WorkWithPlus for Web we can add a 'loading' gif using the DIV.gx-Mask class, to do this we open the theme object and look for the class:

LoadingGif

As we can see, by selecting the DIV.gxMask class we can select a set of properties, for example the Background-Image, where we are going to add the 'loading' gif.

There are other properties such as background-repeat, to determine if we want to repeat the image, or the 'opacity' property to darken the background color.