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


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.


The loader widget has the following options:


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.


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>' +


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...'


Loader is subscribed to the following events:


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


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