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

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

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

processStop

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