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:

1
2
3
4
5
6
<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…’

Methods

• show()
• hide()

show()

Show the loader.

Invoke the show method:

1
$("#element").loader("show");

hide()

Hide the loader.

Invoke the hide method:

1
$("#element").loader("hide");

Events

Loader is subscribed to the following events:

• processStart
• processStop

processStart

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

Start show loading:

1
$("body").trigger('processStart');

processStop

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

Stop show loading:

1
$("body").trigger('processStop');