full-screen-loader
Reactive icon

Full Screen Loader

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 09 July 2023
 by 
5.0
 (2 ratings)
full-screen-loader

Full Screen Loader

Documentation
1.0.0

To use the Full-Screen Loader component in your OutSystems application, follow these steps:

  1. Drag and drop the Full-Screen Loader block onto the desired screen:

  2. Create a Boolean variable to control the loader activation:

    • In your module logic, create a Boolean variable that will hold the value for enabling or disabling the loader.
    • Name the variable appropriately, such as "IsLoading" or "ShowLoader".
  3. Configure the input parameter of the Loader block:

    • On the Full-Screen Loader block, you placed on the screen, locate the input parameter named "IsActive".
    • Connect the Boolean variable you created in Step 2 to the "IsActive" input parameter.
      • This can be done by selecting the Full Screen Loader block, navigating to the Properties pane, finding the "IsActive" input parameter, and choosing the Boolean variable from the dropdown list.
  4. Set the value of the Boolean variable:

    • Determine when and where you want the loader to be activated or deactivated based on your application's requirements.
    • Depending on your scenario, you can set the Boolean variable to True or False using actions triggered by events such as button clicks or page loads.
    • For example, if you want the loader to appear when a button is clicked, add an action to the button's OnClick event that sets the Boolean variable to True. Similarly, set it to False when the loading process completes.
  5. Customize the appearance of the loader:

    • To align the loader vertically, you can adjust the positioning properties of the Full Screen Loader block.
      • Select the Full Screen Loader block on the screen and use the Alignment options (e.g., VerticalAlign) in the Properties pane to position it at the center, top, or bottom of the screen.
    • To add custom text below the loader:
      • On the Full Screen Loader block, find the input parameter for custom text (e.g., "CustomText") and pass the desired text to it.
  6. To customize the loader icon or animation:
    • Locate the container element within the Full-Screen Loader block where the loader exists.
    • Inside the container, you can add the desired loading icon or animation, such as a GIF image or a custom loading icon available in your resources.