Loading screen
The loading screen element allows you to display a loading animation while your page's elements and data are being loaded beneath. You will want to include this on every page where you want this behavior.
The element can be found under Visual elements.
Simply drag it on to the page in order for it to be active. No matter how large the element is, it will always take up the full width of the page. Make it 1x1 pixels and place it in the top right corner of the page to avoid responsiveness issues.
The properties panel provides several options for customizing the behavior and appearance of the loader.
There are two ways in which you can use the loading element.
1. Display by default on page load
If the element is set to be visible on page load, a loading screen will appear on the page until you explicitly hide it. In order to have it disappear once the page's elements are loaded, you can either:
- 1.Create a workflow which is triggered when the page is loaded & loaded above the fold. Attach the Hide loading screen action.
- 2.Check the loading screen element's Auto close option
2. Manually set when to show/hide the loader
Under Workflow actions > Plugins, you have two loader actions, one to show the loader and one to hide it. Use these to show the loader while specific workflows are firing (i.e. while making bulk changes to a list).
Updating the animation
You can change the loader animation by pasting in a new animation json URL from lottiefiles.com (requires signup). Adjust the width and height in the code below to modify the size of the animation.
<lottie-player src="
https://s3.amazonaws.com/appforest_uf/f1622680371274x297542111769113480/lottie_loader2.json
" background="transparent" speed="1" style="width: 140px; height: 140px;" loop autoplay></lottie-player>
Updating the loading screen text
Modify the code in the loading screen element's text field to tweak the font size, color, weight, line height, and description.
<div style="display: block"><h3 style="font-size:23px; font-weight: 600; line-height: 36px">Please wait</h3><p style ="color: #6B7280">Setting up your portal</p></div>
Last modified 1yr ago