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) → {object}
Hide an existing spinner.
This method will hide and remove the loading spinner markup from the document entirely.
Parameters:
| Name | Type | Description |
|---|---|---|
$spinner |
object | 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:
Returns:
Returns a promise object that will be resolved once the spinner is removed.
- Type
- object
(static) show($targetElement) → {object}
Show the loading spinner to the target element.
Parameters:
| Name | Type | Description |
|---|---|---|
$targetElement |
object | (optional) The target element will be overlayed by the spinner. If no argument is provided then the spinner will overlay the whole page. |
- 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
- object