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.