Loader widget

Overview

The Loader widget blocks page content (all content or a part of it). Its intended use is blocking content when an Ajax request is being sent. But it can be initialized for non-Ajax tasks as well.

The Loader widget source is lib/web/mage/loader.js.

Initialize the loader widget

The loader widget is initialized as described in JavaScript initialization.

Options

The loader widget has the following options:

• icon
• template
• texts

icon

The URL to the loader image. This image is displayed when the widget is active; that is, between the ajaxSend and ajaxComplete events.

Type: String

Default value: No image by default.

template

HTML wrapper for the output, or a DOM element selector.

Default value:

'<div class="loading-mask" data-role="loader">' +
    '<div class="loader">' +
         '<img alt="<%- data.texts.imgAlt %>" src="<%- data.icon %>">' +
        '<p><%- data.texts.loaderText %></p>' +
    '</div>' +
'</div>'

texts

An object that contains translations for loader text:

• texts.loaderText: The text that is displayed under the loader image.
  Default value: 'Please wait...'
• texts.imgAlt: The text that is set as the alt attribute value of the loader image.
  Default value: 'Loading...'

Events

Loader is subscribed to the following events:

• processStart
• processStop
• texts

processStart

Display the loader. Can be triggered on any page element.

processStop

Hide the loader. Can be triggered on any page element.