Loader

new Loader(options) → {Class}

A loader component that can be used as a simple spinner or a full masked element with spinner and text as needed.

Parameters:
NameTypeDescription
optionsobject

The options for the component.

Properties
NameTypeDescription
backgroundstring

The background color for the loader.

customAttributesobject

Any custom attributes for the component.

customClassesArray

An array of additional classes for the component.

displayNoneOnHideboolean

On hide should it use display none or just opacity?

displayTextboolean

Whether to display the loader text.

foregroundstring

The foreground color for the loader.

idstring

Id for the component, auto generated if not passed.

maskstring

The mask for the loader.

maskThemestring

The mask theme for the loader.

positionstring

The position for the loader.

renderedstring

Is the component already rendered in the dom, eg by php?

renderOnInitstring

Render the component on init of the class?

showOnRenderstring

Show the component on render?

sizestring

The size for the loader.

spacingstring

Spacing for the component.

targetstring

The target to render to. Any valid css selector string.

targetPositionstring

The insert position for the component relative to the target.

textstring

Text to show below the loader or for screen readers based on the displayText option if loader mask is enabled. Required for a11y if mask is enabled.

textColorstring

The text color for the loader.

themestring

Theme for the component, primary or cosmos.

typestring

Type for the loader, spinner or bar.

wrapperCustomAttributesobject

Any custom attributes for the textarea wrapper.

wrapperCustomClassesArray

Any custom classes for the textarea wrapper.

wrapperTagNamestring

Tag to use for the textarea wrapper. Defaults to 'div',

Since
  • 1.1.16
Source
Returns:

The class instance.

Type: 
Class
Example
import Loader from '@gravityforms/components/html/admin/elements/Loader';

function Example() {
     const loaderInstance = new Loader( {
         id: 'example-loader',
         renderOnInit: false,
         target: '#example-target',
         targetPosition: 'beforeend',
         theme: 'cosmos',
     } );

     // Some time later we can render it. This is only done if we set renderOnInit to false.
     // If true it will render on initialization.
     loaderInstance.init();
}

Methods

(static) hideLoader() → {void}

Hide the loader.

Since
  • 1.1.16
Source
Fires:
Returns:
Type: 
void

(static) init() → {void}

Initialize the component.

Since
  • 1.1.16
Source
Fires:
Returns:
Type: 
void

(static) loaderTemplate(options) → {string}

Generates the markup for a loader in the admin.

Parameters:
NameTypeDescription
optionsobject

The options for the component template.

Properties
NameTypeDescription
backgroundstring

The background color for the loader.

customAttributesobject

Any custom attributes.

customClassesArray

An array of additional classes for the toggle.

displayTextboolean

Whether to display the loader text.

foregroundstring

The foreground color for the loader.

idstring

Id for the loader, auto generated if not passed.

maskstring

The mask for the loader.

maskThemestring

The mask theme for the loader.

positionstring

The position for the loader.

sizestring

The size for the loader.

spacingstring | number | Array | object

The spacing for the component, string, number, object or array.

textstring

The text for the loader.

textColorstring

The text color for the loader.

themestring

Theme for the toggle, primary or cosmos.

typestring

Type for the loader, spinner or bar.

wrapperCustomAttributesobject

Any custom attributes for the textarea wrapper.

wrapperCustomClassesArray

Any custom classes for the textarea wrapper.

wrapperTagNamestring

Tag to use for the textarea wrapper. Defaults to 'div',

Since
  • 1.1.16
Source
Returns:
Type: 
string
Example
import { loaderTemplate } from '@gravityforms/components/html/admin/elements/Loader';

function Example() {
     const loaderTemplateHTML = loaderTemplateTemplate( options );
     document.body.insertAdjacentHTML( 'beforeend', loaderTemplateHTML );
}

(static) positionLoader() → {void}

Sets the vertical position for the loader.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) removeLoader() → {void}

Removes the injected nodes from the dom.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) render() → {void}

Renders the component into the dom.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) setInitialUI() → {void}

Handles initial visibility for the loader. If showOnRender is false, hides the loader.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) showLoader() → {void}

Reveal the loader.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) storeElements() → {void}

Store the elements on the elements object of this instance.

Since
  • 1.1.16
Source
Returns:
Type: 
void