Skip to main content

Loading

Shadow dwc-loading
Java API

The Loading component in webforJ displays an overlay that signals the processing of an operation, temporarily preventing user interaction until the task is complete. This feature improves the user experience, especially in situations where tasks like data loading, computations, or background processes may take some time. For global, app-wide processes, consider using the BusyIndicator component, which blocks interaction across the entire interface.

Basics​

The simplest way to create a Loading component is by initializing it without any additional settings. By default, this displays a basic spinner over its parent content. However, you can also provide a message for more context.

Here's an example of creating a Loading component with a message:

Show Code

Scoping​

The Loading component in webforJ can scope itself to a specific parent container, such as a Div, ensuring that it only blocks user interaction within that element. By default, the Loading component is relative to its parent, meaning it overlays the parent component rather than the entire app.

To limit the Loading component to its parent, simply add the Loading component to the parent container. For example, if you add it to a Div, the loading overlay applies only to that Div:

Div parentDiv = new Div();  
parentDiv.setStyle("position", "relative");
Loading loading = new Loading();
parentDiv.add(loading);
loading.open();  // Loading will only block interaction within the parentDiv

Backdrop​

The Loading component in webforJ allows you to display a backdrop to block user interaction while a process is ongoing. By default, the component enables the backdrop, but you have the option to turn it off if needed.

For the Loading component, the backdrop is visible by default. You can explicitly enable or turn off it using the setBackdropVisible() method:

Loading loading = new Loading();
loading.setBackdropVisible(false);  // Disables the backdrop
loading.open();
Backdrop Off

Even when you turn off the backdrop, the Loading component continues to block user interaction to ensure the underlying process completes uninterrupted. The backdrop simply controls the visual overlay, not the interaction blocking behavior.

Spinner​

The Loading component in webforJ includes a Spinner that visually indicates a background operation is in progress. You can customize this spinner with several options, including its size, speed, direction, theme, and visibility.

Here's an example of how you can customize the spinner within a Loading component:

Show Code

Use cases​

  • Data Fetching
    When retrieving data from a server or API, the Loading component overlays a specific section of the UI, such as a card or form, to inform users that the system is working in the background. This is ideal when you want to show progress on just one part of the screen without blocking the entire interface.

  • Content Loading in Cards/Sections
    The Loading component can be scoped to specific areas of a page, such as individual cards or containers. This is useful when you want to indicate that a particular section of the UI is still loading while allowing users to interact with other parts of the page.

  • Complex Form Submissions
    For longer form submissions where validation or processing takes time, the Loading component provides visual feedback to users, reassuring them that their input is actively processing.

Styling​

Shadow parts​

These are the various parts of the shadow DOM for the component, which will be required when styling via CSS is desired.

Loading...

CSS properties​

These are the various CSS properties that are used in the component, with a short description of their use.

Loading...

Reflected attributes​

The reflected attributes of a component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes.

Loading...