Loading Spinner Library

This library provides an easy and simple way to display a loading spinner inside any container element to provide a smooth "loading" experience to the UI. If no container is specified then the whole page will be taken for the display. The loading spinner comes from the Font Awesome "fa-spinner" class. You can load this library as a dependency to existing modules.

The following usage example will show you how to display and hide the spinner inside an element.

// Create a selector variable for the target element.
var $targetElement = $('#my-div');

// The $targetElement will be overlayed by the spinner.
var $spinner = window.jse.libs.loading_spinner.show($targetElement);

// Do some stuff ...

// Hide the spinner when the job is done.
window.jse.loading_spinner.hide($spinner);
Source:

Methods

(static) hide($spinner) → {jQuery.Promise}

Hide an existing spinner.

This method will hide and remove the loading spinner markup from the document entirely.

Parameters:
Name Type Description
$spinner jQuery

Must be the selector provided from the "show" method. If the selector is invalid or no elements were found then an exception will be thrown.

Source:
Throws:

Error If the $spinner selector was not found in the spinner instances.

Returns:

Returns a promise object that will be resolved once the spinner is removed.

Type
jQuery.Promise

(static) show($targetElement, zIndex) → {jQuery}

Show the loading spinner to the target element.

Parameters:
Name Type Description
$targetElement jQuery

(optional) The target element will be overlayed by the spinner. If no argument is provided then the spinner will overlay the whole page.

zIndex String

Optional ('auto'), give a specific z-index value to the loading spinner.

Source:
Returns:

Returns the selector of the spinner div element. You can further manipulate the spinner if required, but you have to provide this selector as a parameter to the "hide" method below.

Type
jQuery