Class LoadingLayout


public class LoadingLayout extends PageLayout<LoadingLayout>
A layout for loading states with spinner, message, and optional progress indicator.

LoadingLayout provides a centered, user-friendly structure for displaying loading states while content is being fetched or processed. It supports spinners, progress bars, loading messages, and can be used as an overlay or inline element.

Structure:

 ┌──────────────────────────────────────┐
 │                                      │
 │            ┌────────┐                │
 │            │Spinner │                │
 │            └────────┘                │
 │                                      │
 │            Loading...                │  (Message)
 │                                      │
 │         ═══════════════              │  (Progress - optional)
 │                                      │
 └──────────────────────────────────────┘
 

Features:

  • Customizable spinner/loading indicator
  • Loading message text
  • Optional progress indicator
  • Overlay mode for blocking UI
  • Inline mode for partial loading

Usage:


 // Basic loading
 LoadingLayout loading = new LoadingLayout();
 loading.spinner(spinnerElement)
        .message("Loading...");

 // With progress
 LoadingLayout loading = new LoadingLayout();
 loading.spinner(spinnerElement)
        .message("Uploading file...")
        .progress(progressBar);

 // Overlay mode (blocks UI)
 LoadingLayout loading = new LoadingLayout();
 loading.overlay()
        .spinner(spinnerElement)
        .message("Please wait...");

 // Simple centered spinner
 LoadingLayout loading = new LoadingLayout();
 loading.spinner(customSpinner)
        .fillParent();
 
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Constructor Details

    • LoadingLayout

      public LoadingLayout()
      Constructs a LoadingLayout with default configuration.
  • Method Details

    • initialize

      protected void initialize()
      Builds the element tree for the layout.
      Overrides:
      initialize in class StyledElement<LoadingLayout>
    • spinner

      public LoadingLayout spinner(Element<?> spinner)
      Sets the spinner/loading indicator element.
      Parameters:
      spinner - the spinner element
      Returns:
      this LoadingLayout for method chaining
    • message

      public LoadingLayout message(String message)
      Sets the loading message text.
      Parameters:
      message - the message text
      Returns:
      this LoadingLayout for method chaining
    • message

      public LoadingLayout message(Element<?> message)
      Sets the loading message as an element.
      Parameters:
      message - the message element
      Returns:
      this LoadingLayout for method chaining
    • progress

      public LoadingLayout progress(Element<?> progress)
      Sets the progress indicator element.
      Parameters:
      progress - the progress element (progress bar, percentage, etc.)
      Returns:
      this LoadingLayout for method chaining
    • overlay

      public LoadingLayout overlay()
      Enables overlay mode with semi-transparent backdrop.
      Returns:
      this LoadingLayout for method chaining
    • overlay

      public LoadingLayout overlay(String backdropColor)
      Enables overlay mode with custom backdrop color.
      Parameters:
      backdropColor - the backdrop color (e.g., "rgba(255,255,255,0.9)")
      Returns:
      this LoadingLayout for method chaining
    • darkOverlay

      public LoadingLayout darkOverlay()
      Enables dark overlay mode.
      Returns:
      this LoadingLayout for method chaining
    • absoluteOverlay

      public LoadingLayout absoluteOverlay()
      Sets this as an absolute overlay (within parent container).
      Returns:
      this LoadingLayout for method chaining
    • absoluteOverlay

      public LoadingLayout absoluteOverlay(String backdropColor)
      Sets this as an absolute overlay with custom backdrop.
      Parameters:
      backdropColor - the backdrop color
      Returns:
      this LoadingLayout for method chaining
    • setMessageColor

      public LoadingLayout setMessageColor(String color)
      Sets the message text color.
      Parameters:
      color - the text color
      Returns:
      this LoadingLayout for method chaining
    • setMessageSize

      public LoadingLayout setMessageSize(String size)
      Sets the message font size.
      Parameters:
      size - the font size (e.g., "1rem", "14px")
      Returns:
      this LoadingLayout for method chaining
    • setSpinnerSpacing

      public LoadingLayout setSpinnerSpacing(int spacing)
      Sets spacing below the spinner.
      Parameters:
      spacing - the spacing in pixels
      Returns:
      this LoadingLayout for method chaining
    • setSpinnerSpacing

      public LoadingLayout setSpinnerSpacing(String spacing)
      Sets spacing below the spinner.
      Parameters:
      spacing - the spacing value (e.g., "16px", "1rem")
      Returns:
      this LoadingLayout for method chaining
    • setMessageSpacing

      public LoadingLayout setMessageSpacing(int spacing)
      Sets spacing below the message.
      Parameters:
      spacing - the spacing in pixels
      Returns:
      this LoadingLayout for method chaining
    • setMessageSpacing

      public LoadingLayout setMessageSpacing(String spacing)
      Sets spacing below the message.
      Parameters:
      spacing - the spacing value (e.g., "16px", "1rem")
      Returns:
      this LoadingLayout for method chaining
    • setProgressWidth

      public LoadingLayout setProgressWidth(int width)
      Sets the width of the progress area.
      Parameters:
      width - the width in pixels
      Returns:
      this LoadingLayout for method chaining
    • setProgressWidth

      public LoadingLayout setProgressWidth(String width)
      Sets the width of the progress area.
      Parameters:
      width - the width value (e.g., "200px", "80%")
      Returns:
      this LoadingLayout for method chaining
    • setContentPadding

      public LoadingLayout setContentPadding(int padding)
      Sets padding for the content container.
      Parameters:
      padding - the padding in pixels
      Returns:
      this LoadingLayout for method chaining
    • setContentPadding

      public LoadingLayout setContentPadding(String padding)
      Sets padding for the content container.
      Parameters:
      padding - the padding value (e.g., "32px", "2rem")
      Returns:
      this LoadingLayout for method chaining
    • setZIndex

      public LoadingLayout setZIndex(int zIndex)
      Sets the z-index for overlay mode.
      Overrides:
      setZIndex in class StyledElement<LoadingLayout>
      Parameters:
      zIndex - the z-index value
      Returns:
      this LoadingLayout for method chaining
    • isOverlay

      public boolean isOverlay()
      Checks if this loading layout is in overlay mode.
      Returns:
      true if overlay mode is enabled
    • getContainer

      public Div getContainer()
      Returns the container for advanced customization.
      Returns:
      the container div
    • getSpinnerArea

      public Div getSpinnerArea()
      Returns the spinner area for advanced customization.
      Returns:
      the spinner area div
    • getMessageArea

      public Div getMessageArea()
      Returns the message area for advanced customization.
      Returns:
      the message area div
    • getProgressArea

      public Div getProgressArea()
      Returns the progress area for advanced customization.
      Returns:
      the progress area div
    • lightOverlay

      public LoadingLayout lightOverlay()
      Applies a light overlay (white background with 90% opacity).
      Returns:
      this LoadingLayout for method chaining
    • loading

      public LoadingLayout loading()
      Sets a generic "Loading..." message.
      Returns:
      this LoadingLayout for method chaining
    • uploading

      public LoadingLayout uploading()
      Sets an "Uploading..." message.
      Returns:
      this LoadingLayout for method chaining
    • processing

      public LoadingLayout processing()
      Sets a "Processing..." message.
      Returns:
      this LoadingLayout for method chaining
    • saving

      public LoadingLayout saving()
      Sets a "Saving..." message.
      Returns:
      this LoadingLayout for method chaining
    • pleaseWait

      public LoadingLayout pleaseWait()
      Sets a "Please wait..." message.
      Returns:
      this LoadingLayout for method chaining
    • spinnerAndMessage

      public LoadingLayout spinnerAndMessage(Element<?> spinner, String message)
      Sets both spinner and message in one call.
      Parameters:
      spinner - the spinner element
      message - the loading message
      Returns:
      this LoadingLayout for method chaining
    • compactStyle

      public LoadingLayout compactStyle()
      Applies compact styling (smaller padding and spacing).
      Returns:
      this LoadingLayout for method chaining
    • spaciousStyle

      public LoadingLayout spaciousStyle()
      Applies spacious styling (larger padding and spacing).
      Returns:
      this LoadingLayout for method chaining