Package com.oorian.html.layout
Class LoadingLayout
java.lang.Object
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 Summary
Constructors -
Method Summary
Modifier and TypeMethodDescriptionSets this as an absolute overlay (within parent container).absoluteOverlay(String backdropColor) Sets this as an absolute overlay with custom backdrop.Applies compact styling (smaller padding and spacing).Enables dark overlay mode.Returns the container for advanced customization.Returns the message area for advanced customization.Returns the progress area for advanced customization.Returns the spinner area for advanced customization.protected voidBuilds the element tree for the layout.booleanChecks if this loading layout is in overlay mode.Applies a light overlay (white background with 90% opacity).loading()Sets a generic "Loading..." message.Sets the loading message as an element.Sets the loading message text.overlay()Enables overlay mode with semi-transparent backdrop.Enables overlay mode with custom backdrop color.Sets a "Please wait..." message.Sets a "Processing..." message.Sets the progress indicator element.saving()Sets a "Saving..." message.setContentPadding(int padding) Sets padding for the content container.setContentPadding(String padding) Sets padding for the content container.setMessageColor(String color) Sets the message text color.setMessageSize(String size) Sets the message font size.setMessageSpacing(int spacing) Sets spacing below the message.setMessageSpacing(String spacing) Sets spacing below the message.setProgressWidth(int width) Sets the width of the progress area.setProgressWidth(String width) Sets the width of the progress area.setSpinnerSpacing(int spacing) Sets spacing below the spinner.setSpinnerSpacing(String spacing) Sets spacing below the spinner.setZIndex(int zIndex) Sets the z-index for overlay mode.Applies spacious styling (larger padding and spacing).Sets the spinner/loading indicator element.spinnerAndMessage(Element<?> spinner, String message) Sets both spinner and message in one call.Sets an "Uploading..." message.Methods inherited from class com.oorian.html.layout.PageLayout
createPane, createPane, fillParent, fillViewport, setBackgroundColor, setMinHeightMethods inherited from class com.oorian.html.StyledElement
addClass, addStyle, addStyle, addStyleAttribute, addTransition, animate, clearTransitions, getActiveStyle, getCssClass, getDisabledStyle, getFocusStyle, getFocusVisibleStyle, getHoverStyle, getHtml, getStyle, getStyleAttribute, hidden, hide, isDisplayed, isTransitionForwardActive, onHide, onRemovedFromPage, onShow, removeClass, setActiveStyle, setAlignContent, setAlignContent, setAlignItems, setAlignItems, setAlignSelf, setAlignSelf, setAnimation, setAnimationDelay, setAnimationDelay, setAnimationDelay, setAnimationDirection, setAnimationDirection, setAnimationDuration, setAnimationDuration, setAnimationDuration, setAnimationFillMode, setAnimationFillMode, setAnimationIterationCount, setAnimationIterationCount, setAnimationIterationCount, setAnimationName, setAnimationPlayState, setAnimationPlayState, setAnimationTimingFunction, setAnimationTimingFunction, setAnimationTimingFunction, setAnimationTimingFunction, setBackdropFilter, setBackdropFilter, setBackfaceVisibility, setBackfaceVisibility, setBackground, setBackground, setBackgroundAttachment, setBackgroundAttachment, setBackgroundBlendMode, setBackgroundBlendMode, setBackgroundClip, setBackgroundClip, setBackgroundColor, setBackgroundColor, setBackgroundImage, setBackgroundImage, setBackgroundOrigin, setBackgroundOrigin, setBackgroundPosition, setBackgroundPosition, setBackgroundPosition, setBackgroundPosition, setBackgroundPosition, setBackgroundRepeat, setBackgroundRepeat, setBackgroundSize, setBackgroundSize, setBackgroundSize, setBackgroundSize, setBackgroundSize, setBlur, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorder, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottom, setBorderBottomColor, setBorderBottomColor, setBorderBottomLeftRadius, setBorderBottomLeftRadius, setBorderBottomLeftRadius, setBorderBottomRightRadius, setBorderBottomRightRadius, setBorderBottomRightRadius, setBorderBottomStyle, setBorderBottomStyle, setBorderBottomWidth, setBorderBottomWidth, setBorderBottomWidth, setBorderBottomWidth, setBorderColor, setBorderColor, setBorderColor, setBorderColor, setBorderImage, setBorderImage, setBorderImageOutset, setBorderImageRepeat, setBorderImageSlice, setBorderImageSource, setBorderImageWidth, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeft, setBorderLeftColor, setBorderLeftColor, setBorderLeftStyle, setBorderLeftStyle, setBorderLeftWidth, setBorderLeftWidth, setBorderLeftWidth, setBorderLeftWidth, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRadius, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRight, setBorderRightColor, setBorderRightColor, setBorderRightStyle, setBorderRightStyle, setBorderRightWidth, setBorderRightWidth, setBorderRightWidth, setBorderRightWidth, setBorderStyle, setBorderStyle, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTop, setBorderTopColor, setBorderTopColor, setBorderTopLeftRadius, setBorderTopLeftRadius, setBorderTopLeftRadius, setBorderTopRightRadius, setBorderTopRightRadius, setBorderTopRightRadius, setBorderTopStyle, setBorderTopStyle, setBorderTopWidth, setBorderTopWidth, setBorderTopWidth, setBorderTopWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBorderWidth, setBottom, setBottom, setBottom, setBoxShadow, setBoxShadow, setBoxShadow, setBoxShadow, setBoxShadow, setBoxSizing, setBoxSizing, setBreakAfter, setBreakBefore, setBreakInside, setBrightness, setClass, setClear, setClear, setClip, setClipPath, setClipPath, setColGap, setColGap, setColor, setColor, setColumnCount, setColumnCount, setColumnFill, setColumnFill, setColumnGap, setColumnRule, setColumnRuleColor, setColumnRuleColor, setColumnRuleStyle, setColumnRuleStyle, setColumnRuleWidth, setColumnRuleWidth, setColumns, setColumns, setColumns, setColumnSpan, setColumnWidth, setColumnWidth, setColumnWidth, setContrast, setCounterIncrement, setCounterReset, setCursor, setCursor, setDirection, setDirection, setDisabledStyle, setDisplay, setDisplay, setFilter, setFilter, setFilterOpacity, setFlex, setFlexBasis, setFlexDirection, setFlexDirection, setFlexFlow, setFlexGrow, setFlexGrow, setFlexShrink, setFlexShrink, setFlexWrap, setFlexWrap, setFloat, setFloat, setFocusStyle, setFocusVisibleStyle, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFont, setFontFace, setFontFamily, setFontFamily, setFontFeatureSettings, setFontKerning, setFontLanguageOverride, setFontSize, setFontSize, setFontSize, setFontSizeAdjust, setFontStretch, setFontStretch, setFontStyle, setFontStyle, setFontSynthesis, setFontVariant, setFontVariant, setFontVariantAlternates, setFontVariantCaps, setFontVariantEastAsian, setFontVariantLigatures, setFontVariantNumeric, setFontVariantPosition, setFontWeight, setFontWeight, setGap, setGap, setGap, setGap, setGrayscale, setHangingPunctuation, setHangingPunctuation, setHeight, setHeight, setHeight, setHoverStyle, setHueRotate, setHyphens, setImageOrientation, setImageRendering, setImageResolution, setImeMode, setInvert, setJustifyContent, setJustifyContent, setKeyFrames, setLeft, setLeft, setLeft, setLetterSpacing, setLetterSpacing, setLetterSpacing, setLetterSpacing, setLineBreak, setLineHeight, setLineHeight, setLineHeight, setLineHeight, setMargin, setMargin, setMargin, setMargin, setMargin, setMarginBottom, setMarginBottom, setMarginBottom, setMarginLeft, setMarginLeft, setMarginLeft, setMarginRight, setMarginRight, setMarginRight, setMarginTop, setMarginTop, setMarginTop, setMark, setMarkAfter, setMarkBefore, setMarks, setMarqueeDirection, setMarqueePlayCount, setMarqueeSpeed, setMarqueeStyle, setMask, setMaskType, setMaxHeight, setMaxHeight, setMaxHeight, setMaxHeightToWindowHeight, setMaxWidth, setMaxWidth, setMaxWidth, setMaxWidthToWindowWidth, setMinHeight, setMinHeight, setMinHeightToWindowHeight, setMinWidth, setMinWidth, setMinWidth, setMinWidthToWindowWidth, setNavDown, setNavIndex, setNavIndex, setNavLeft, setNavRight, setNavUp, setObjectFit, setObjectPosition, setOnClickNavigateBack, setOnClickNavigateBack, setOnClickNavigateBack, setOnClickNavigateForward, setOnClickNavigateForward, setOnClickNavigateForward, setOnClickNavigateTo, setOnDblClick, setOnDblClickChange, setOpacity, setOpacity, setOrder, setOrder, setOrphans, setOutline, setOutline, setOutline, setOutline, setOutlineColor, setOutlineColor, setOutlineOffset, setOutlineOffset, setOutlineOffset, setOutlineStyle, setOutlineStyle, setOutlineWidth, setOutlineWidth, setOutlineWidth, setOutlineWidth, setOverflow, setOverflow, setOverflow, setOverflowWrap, setOverflowX, setOverflowX, setOverflowY, setOverflowY, setPadding, setPadding, setPadding, setPadding, setPadding, setPadding, setPadding, setPadding, setPaddingBottom, setPaddingBottom, setPaddingBottom, setPaddingLeft, setPaddingLeft, setPaddingLeft, setPaddingRight, setPaddingRight, setPaddingRight, setPaddingTop, setPaddingTop, setPaddingTop, setPageBreakAfter, setPageBreakAfter, setPageBreakBefore, setPageBreakBefore, setPageBreakInside, setPageBreakInside, setPerspective, setPerspective, setPerspective, setPerspectiveOrigin, setPerspectiveOrigin, setPerspectiveOrigin, setPerspectiveOrigin, setPhonemes, setPosition, setPosition, setPosition, setPosition, setPosition, setQuotes, setResize, setResize, setResizeToWindowHeight, setResizeToWindowHeight, setResizeToWindowWidth, setRest, setRestAfter, setRestBefore, setRight, setRight, setRight, setRotate, setRotate, setRowGap, setRowGap, setSaturate, setScale, setScale, setSepia, setShow, setSize, setSize, setSize, setSkewX, setSkewY, setStyle, setStyle, setTabSize, setTabSize, setTabSize, setTabSize, setTextAlign, setTextAlign, setTextAlignLast, setTextAlignLast, setTextCombineUpright, setTextCombineWeight, setTextDecoration, setTextDecoration, setTextDecorationColor, setTextDecorationColor, setTextDecorationLine, setTextDecorationLine, setTextDecorationStyle, setTextDecorationStyle, setTextIndent, setTextIndent, setTextIndent, setTextIndent, setTextJustify, setTextJustify, setTextOrientation, setTextOverflow, setTextOverflow, setTextSelectDisabled, setTextShadow, setTextShadow, setTextShadow, setTextShadow, setTextShadow, setTextTransform, setTextTransform, setTextUnderlinePosition, setTop, setTop, setTop, setTransform, setTransform, setTransformOrigin, setTransformOrigin, setTransformOrigin, setTransformOrigin, setTransformOrigin, setTransformStyle, setTransformStyle, setTransition, setTransitionDelay, setTransitionDelay, setTransitionDelay, setTransitionDuration, setTransitionDuration, setTransitionDuration, setTransitionProperty, setTransitionTimingFunction, setTransitionTimingFunction, setTransitionTimingFunction, setTransitionTimingFunction, setTranslateX, setTranslateY, setTranslateZ, setUnicodeBidi, setUnicodeBidi, setVerticalAlign, setVerticalAlign, setVisibility, setVisibility, setVoiceBalance, setVoiceDuration, setVoicePitch, setVoicePitchRange, setVoiceRate, setVoiceStress, setVoiceVolume, setWhiteSpace, setWhiteSpace, setWidows, setWidth, setWidth, setWidth, setWordBreak, setWordBreak, setWordSpacing, setWordSpacing, setWordSpacing, setWordSpacing, setWordWrap, setWordWrap, setWritingMode, setZIndex, show, shown, stopAnimation, transitionForward, transitionForward, transitionReverse, transitionReverse, updateStyle, updateStyle, updateStyleIfChangedMethods inherited from class com.oorian.html.VisualElement
clearOnClick, click, disable, enable, getAccessKey, getAutoCapitalize, getEnterKeyHint, getInputMode, getPopover, getRole, getTabIndex, getTitle, isAutoFocus, isContentEditable, isDisabled, isDraggable, isHidden, isInert, isSpellCheck, onDisabled, onEnabled, setAccessKey, setAriaAtomic, setAriaBusy, setAriaChecked, setAriaCheckedMixed, setAriaControls, setAriaCurrent, setAriaDescribedBy, setAriaDisabled, setAriaErrorMessage, setAriaExpanded, setAriaHasPopup, setAriaHasPopup, setAriaHidden, setAriaInvalid, setAriaLabel, setAriaLabelledBy, setAriaLevel, setAriaLive, setAriaModal, setAriaOwns, setAriaPressed, setAriaRequired, setAriaSelected, setAriaValueRange, setAriaValueText, setAutoCapitalize, setAutoFocus, setConsumeEvent, setContentEditable, setDisabled, setDraggable, setDropAllowed, setEnterKeyHint, setFocus, setHidden, setInert, setInputMode, setOnAnimationCancel, setOnAnimationEnd, setOnAnimationIteration, setOnAnimationStart, setOnAuxClick, setOnBeforeInput, setOnBeforeToggle, setOnBlur, setOnChange, setOnClick, setOnClickChange, setOnCompositionEnd, setOnCompositionStart, setOnCompositionUpdate, setOnContextMenu, setOnCopy, setOnCut, setOnDocumentResize, setOnFocus, setOnFocusIn, setOnFocusOut, setOnFormData, setOnGotPointerCapture, setOnInput, setOnInvalid, setOnKeyDown, setOnKeyPressed, setOnKeyUp, setOnLostPointerCapture, setOnMouseDown, setOnMouseEnter, setOnMouseLeave, setOnMouseMove, setOnMouseOut, setOnMouseOutChangeClass, setOnMouseOutChangeStyle, setOnMouseOutChangeStyle, setOnMouseOver, setOnMouseOverChangeClass, setOnMouseOverChangeStyle, setOnMouseOverChangeStyle, setOnMouseOverShow, setOnMouseUp, setOnPageLoad, setOnPaste, setOnPointerCancel, setOnPointerDown, setOnPointerEnter, setOnPointerLeave, setOnPointerMove, setOnPointerOut, setOnPointerOver, setOnPointerUp, setOnResize, setOnScroll, setOnScrollEnd, setOnSelect, setOnSelectionChange, setOnSelectStart, setOnToggle, setOnTouchCancel, setOnTouchEnd, setOnTouchMove, setOnTouchStart, setOnTransitionCancel, setOnTransitionEnd, setOnTransitionRun, setOnTransitionStart, setOnWheel, setOnWindowResize, setPopover, setRole, setRole, setSpellCheck, setTabIndex, setTitle, setTooltipMethods inherited from class com.oorian.html.Element
addAttribute, addAttribute, addAttribute, addAttribute, addElement, addLineBreak, addLineOfText, addLineOfText, addLineOfText, addParagraph, addParagraph, addSpacer, addText, addText, addText, addText, assignId, containsElement, containsElement, create, dispatchEvent, dispatchEvent, dispatchEvent, dispatchEvent, equals, excludeId, executeJs, executeJs, executeJs, getAccept, getAllElements, getAncestor, getAttribute, getAttributes, getComponent, getDir, getElement, getElementById, getElementCount, getElementCount, getElements, getElements, getElementsByComponentName, getElementsByTagName, getHtml, getId, getInnerHtml, getInnerHtml, getIs, getItemId, getItemProp, getItemRef, getItemType, getLang, getNextSibling, getPage, getParent, getPart, getPrevSibling, getSlot, getTagName, getTextContent, getUrl, hasAttribute, hasElements, insertElement, isChildOf, isClosedTag, isCreated, isDescendantOf, isDescendantOf, isInitialized, isItemScope, isTranslate, onCallback, onCreated, onElementAdded, onElementRemoved, onHashChange, onHidden, onInitialized, onJsReturn, onPageLoaded, onPageUnloaded, onRefresh, onShown, onUpdated, onUserEvent, prewrite, recreate, refresh, refresh, registerAddition, registerListener, registerListener, registerListener, registerListener, registerListener, registerListener, registerListener, registerSubtraction, registerUpdate, removeAllElements, removeAttribute, removeAttribute, removeElement, removeElement, removeFromParent, requestCallback, requestCallback, requestCallback, requestCallback, resetId, scrollTo, scrollToBottom, scrollToTop, self, sendCommand, sendUpdate, setAccept, setComponent, setDir, setDir, setElement, setId, setIs, setItemId, setItemProp, setItemRef, setItemScope, setItemType, setLang, setOnError, setOnLoad, setPage, setParent, setPart, setSlot, setTagName, setText, setText, setText, setText, setTranslate, toString, unregisterListener, update, updateAttributes
-
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:
initializein classStyledElement<LoadingLayout>
-
spinner
Sets the spinner/loading indicator element.- Parameters:
spinner- the spinner element- Returns:
- this LoadingLayout for method chaining
-
message
Sets the loading message text.- Parameters:
message- the message text- Returns:
- this LoadingLayout for method chaining
-
message
Sets the loading message as an element.- Parameters:
message- the message element- Returns:
- this LoadingLayout for method chaining
-
progress
Sets the progress indicator element.- Parameters:
progress- the progress element (progress bar, percentage, etc.)- Returns:
- this LoadingLayout for method chaining
-
overlay
Enables overlay mode with semi-transparent backdrop.- Returns:
- this LoadingLayout for method chaining
-
overlay
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
Enables dark overlay mode.- Returns:
- this LoadingLayout for method chaining
-
absoluteOverlay
Sets this as an absolute overlay (within parent container).- Returns:
- this LoadingLayout for method chaining
-
absoluteOverlay
Sets this as an absolute overlay with custom backdrop.- Parameters:
backdropColor- the backdrop color- Returns:
- this LoadingLayout for method chaining
-
setMessageColor
Sets the message text color.- Parameters:
color- the text color- Returns:
- this LoadingLayout for method chaining
-
setMessageSize
Sets the message font size.- Parameters:
size- the font size (e.g., "1rem", "14px")- Returns:
- this LoadingLayout for method chaining
-
setSpinnerSpacing
Sets spacing below the spinner.- Parameters:
spacing- the spacing in pixels- Returns:
- this LoadingLayout for method chaining
-
setSpinnerSpacing
Sets spacing below the spinner.- Parameters:
spacing- the spacing value (e.g., "16px", "1rem")- Returns:
- this LoadingLayout for method chaining
-
setMessageSpacing
Sets spacing below the message.- Parameters:
spacing- the spacing in pixels- Returns:
- this LoadingLayout for method chaining
-
setMessageSpacing
Sets spacing below the message.- Parameters:
spacing- the spacing value (e.g., "16px", "1rem")- Returns:
- this LoadingLayout for method chaining
-
setProgressWidth
Sets the width of the progress area.- Parameters:
width- the width in pixels- Returns:
- this LoadingLayout for method chaining
-
setProgressWidth
Sets the width of the progress area.- Parameters:
width- the width value (e.g., "200px", "80%")- Returns:
- this LoadingLayout for method chaining
-
setContentPadding
Sets padding for the content container.- Parameters:
padding- the padding in pixels- Returns:
- this LoadingLayout for method chaining
-
setContentPadding
Sets padding for the content container.- Parameters:
padding- the padding value (e.g., "32px", "2rem")- Returns:
- this LoadingLayout for method chaining
-
setZIndex
Sets the z-index for overlay mode.- Overrides:
setZIndexin classStyledElement<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
Returns the container for advanced customization.- Returns:
- the container div
-
getSpinnerArea
Returns the spinner area for advanced customization.- Returns:
- the spinner area div
-
getMessageArea
Returns the message area for advanced customization.- Returns:
- the message area div
-
getProgressArea
Returns the progress area for advanced customization.- Returns:
- the progress area div
-
lightOverlay
Applies a light overlay (white background with 90% opacity).- Returns:
- this LoadingLayout for method chaining
-
loading
Sets a generic "Loading..." message.- Returns:
- this LoadingLayout for method chaining
-
uploading
Sets an "Uploading..." message.- Returns:
- this LoadingLayout for method chaining
-
processing
Sets a "Processing..." message.- Returns:
- this LoadingLayout for method chaining
-
saving
Sets a "Saving..." message.- Returns:
- this LoadingLayout for method chaining
-
pleaseWait
Sets a "Please wait..." message.- Returns:
- this LoadingLayout for method chaining
-
spinnerAndMessage
Sets both spinner and message in one call.- Parameters:
spinner- the spinner elementmessage- the loading message- Returns:
- this LoadingLayout for method chaining
-
compactStyle
Applies compact styling (smaller padding and spacing).- Returns:
- this LoadingLayout for method chaining
-
spaciousStyle
Applies spacious styling (larger padding and spacing).- Returns:
- this LoadingLayout for method chaining
-