Magento 2.0.18 is the final 2.0.x release. After March 2018, Magento 2.0.x will no longer receive security patches, quality fixes, or documentation updates.
To maintain your site's performance, security, and PCI compliance, upgrade to the latest version of Magento.

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.