Sometimes a user may need to wait for an API call or a longer running database query to complete. The attached application shows how you can use a spinner animation to indicate this to the user and block the page or specific page elements while they wait.
In the attachment you will find a variety of premade spinners to choose from and an example of how to show a full-page or an element-level spinner.
Full Page Spinner
- Add a container control with the custom class ‘overlay’ and set the visibility to ‘false’ to a page
- Add a second container control inside the ‘overlay’ control with the custom class of ‘spinnerX’ (x is the spinner number)
- Enable the Style Sheet and copy the CSS from the sample application stylesheet to your stylesheet (you can remove the ‘listinggrid’ and all spinner CSS you don’t need)
- Use a SetValue in event handlers or scripts to show or hide the spinner by setting the ‘overlay’ control’s visibility property to true or false
Element-Level Spinner
Follow all the steps for the full-page spinner, but also add a container control with the class ‘contained’. Into this container you then place the overlay container as well as the element the spinner should block.
Customisations
In the CSS you will find a ‘:root’ element. Here you can change the colours used in the spinner as well as the background colour and the spinner height and width.
The rest
For this demo I added some CSS to keep the menu on top of the spinner. Usually it will hide behind the spinner background.
Spinners.sapz (15.0 KB)