Below is an example of how to implement the Page Loader functionality.

1. Download and install the Page Loader component

   • Open the Page Loader component in Forge and install the component.

     

2. Create the Page Loader dependency

   • Open the Manage Dependencies popup in Service Studio and search for PageLoader. Select all the elements of the Page Loader and click on apply.

     

3. Drop the "ScreenLoader" web block to the web screen where you want to apply the loading overlay.

   • 

     

4. Add the "LoaderPage" css class to the links or buttons that will show the loader when clicked.

   • 

5. Select the "ScreenLoader" element and set a custom loading message at the parameter "Text". 

   • 

6. Select the loading animation that will be displayed by setting the parameter "Animation". (Must add a reference to the "Animation" static entity)

   • 

Available Animations

Notes:

The loader will be shown only after the frontend validation.

The loader will be dismissed on the first ajax refresh after the click or will navigate to the submit destination.