Loading Overlay - Documentation (O11) | OutSystems

Log in

Stable version 1.0.1 (Compatible with OutSystems 11)

Uploaded

on 5 Jun

by

5.0

(1 rating)

loadingoverlay

Documentation

1.0.1

A fullscreen loading overlay with pure CSS.
User interaction is disabled when overlay is active.
Just show/hide the webblock with the help of a boolean local variable according to need to utilize in your screen.

When the webblock is made visible, it shows a white loading spinner at the center, with a gray background. This overlay disables user interaction with the page, thus it is useful if you want the user not to interact with the page while waiting for the operation to complete.
The white loading spinner is rotated using CSS animations. To build the webblock, only a container with a CSS class "loading", and vanilla CSS code is used.

In the demo app, there is a button which enables the overlay for 5 seconds (with the help of a javascript setTimeout function). After 5 seconds, a client action is called within JS setTimeout. That action sets the bool to False and disables the overlay WB.
For usual use-cases, the WB can be made visible when data is being loaded or after a button click, and when the operation is over, it can be hidden again.

1.0.0

A fullscreen loading overlay with pure CSS.
User interaction is disabled when overlay is active.
Just show/hide the webblock with the help of a boolean local variable according to need to utilize in your screen.

When the webblock is made visible, it shows a white loading spinner at the center, with a gray background. This overlay disables user interaction with the page, thus it is useful if you want the user not to interact with the page while waiting for the operation to complete.
The white loading spinner is rotated using CSS animations. To build the webblock, only a container with a CSS class "loading", and vanilla CSS code is used.

In the demo app, there is a button which enables the overlay for 5 seconds (with the help of a javascript setTimeout function). After 5 seconds, a client action is called within JS setTimeout. That action sets the bool to False and disables the overlay WB.
For usual use-cases, the WB can be made visible when data is being loaded or after a button click, and when the operation is over, it can be hidden again.