NssLoadingIndicator

An animated loading spinner overlay. NUI

Getting Started

NssLoadingIndicator displays a fullscreen or element-scoped loading animation. It fades in/out smoothly and returns Promises for animation completion.

import {NssLoadingIndicator} from "nui://nss_libs/ui/NssLoadingIndicator/NssLoadingIndicator.js";

const loading = new NssLoadingIndicator(document.getElementById('content'));
loading.show();

// Later, when loading is complete:
loading.hide();

Constructor

new NssLoadingIndicator(target_el?)

Creates a new loading indicator instance.

Param	Type	Default	Description
target_el	HTMLElement	document.body	The element the indicator will overlay

Fullscreen

const loading = new NssLoadingIndicator();

Scoped

const loading = new NssLoadingIndicator(dialog_el);

Methods

.show()

Displays the loading indicator with a fade-in animation.

Returns Promise<void> — resolves when the fade-in animation completes.

const loading = new NssLoadingIndicator(container_el);
loading.show().then(() => {
    console.log('Indicator is fully visible');
});

---

.hide()

Hides the loading indicator with a fade-out animation.

Returns Promise<void> — resolves when the fade-out animation completes.

loading.hide().then(() => {
    console.log('Indicator is hidden');
});

---

.destroy()

Hides the indicator and removes its DOM element completely.

Returns Promise<void> — resolves after the element is removed.

loading.destroy().then(() => {
    console.log('Indicator destroyed and removed from DOM');
});

Events / Callbacks

None. Use the returned Promises to react to animation completion.

CSS

Classes

Class	Description
.nss-loading-indicator	Root overlay with radial gradient background
.nss-loading-indicator--hidden	Hidden state (display: none)
.nss-loading-indicator--show	Fade-in animation trigger (0.3s)
.nss-loading-indicator--hide	Fade-out animation trigger (0.3s)
.quest-loading-indicator__loader	Inner loader container
.quest-loading-indicator__loader-img	Animated spinner image (inverted colors)

Animations

Keyframe	Description
nss-loading-indicator-anim__fade-in	Opacity 0 → 1
nss-loading-indicator-anim__fade-out	Opacity 1 → 0

Dependencies

• NssUiComponent — base class (initializes NssResponsive).
• Consumes --1rpx and --10rpx from NssResponsive.css.

Things to Know

TIP

The DOM is created lazily on the first show() call.

• If you need overlapping loading indicators on different elements, create a separate instance for each — do not reuse a single instance.
• NssClient uses NssLoadingIndicator internally when a loading_indicator_target_el is passed to post().
• hide() only visually hides the element. Use destroy() to also remove it from the DOM.