Loading UI

Use this class for showing and hiding a loading state UI.

Loading UI Styles

The class is set up to work with the Loading styling out of the box and the styling files should be loaded on pages where this class is used.

Installation

Add import LoadingUI from 'extensions/loading-ui'; to the JavaScript file where this extension will be imported.

Example Usage

.mvt

Create a loading element to target:

<div id="js-loading-container" aria-hidden="true"></div>

If a background overlay is needed for the loading UI, make sure to place the loading target element within the target element for the background overlay:

<div id="js-loading-overlay"> <!-- Background overlay target element -->
    <div id="js-loading-container" aria-hidden="true"></div> <!-- Loading UI target element -->
</div>

.js

Initialize the LoadingUI object after following the installation step.

new LoadingUI(document.getElementById('js-loading-container'));

Another example with the background overlay element:

new LoadingUI(document.getElementById('js-loading-container'), {
    overlayElement: document.getElementById('js-loading-overlay')
});

Options

The LoadingUI class can take an optional configuration object for the second parameter to override any of the default configuration settings. The following table defines the available options:

Name	Type	Description	Default Value
hideOnLoad	Boolean	Flag to determine if the target loading element is hidden on page load.	true
loadingClass	String	The loading class name to apply to the target loading element.	'g-loading'
overlayClass	String	The overlay class name to apply to the target overylay element.	'g-loading-overlay'
overlayElement	HTMLElement String Boolean	The target element for the background overlay. A value set to false disables the overlay element functionality.	false