Important

You are browsing the documentation for version 4.1 of OroCommerce, OroCRM and OroPlatform, which is no longer maintained. Read version 5.1 (the latest LTS version) of the Oro documentation to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

Loading Mask View

The loading mask is used for visualizing loading process and blocking some page functionality with transparent overlay to prevent the influence on loading process

The LoadingMaskView is an extension of BaseView (that inherits all functionality from Chaplin.View and Backbone.View).

Initialization

LoadingMaskView is rendered automatically once it is initialized (has defined property autoRender: true). To create an instance, it is sufficient to pass one option – the container (the element that you want to cover).

1 var loadingMask = new LoadingMaskView({
2     container: $myElement
3 });

Other LoadingMaskView specific options that might be passed to constructor are:

  • loadingHint is a string, a short message displayed to the user during the loading process, ‘Loading…’

  • hideDelay is a number in milliseconds or false and allows to hide loading mask with delay

1  var loadingMask = new LoadingMaskView({
2      container: $myElement,
3      loadingHint: 'Saving...',
4      hideDelay: 25
5  });

How to Usage

 1 /**
 2  * Shows loading mask
 3  */
 4 loadingMask.show();
 5
 6 /**
 7  * Shows the mask with specific loading hint
 8  */
 9 loadingMask.show('Sending...');
10
11 /**
12  * Hides loading mask
13  */
14 loadingMask.hide();
15
16 /**
17  * If loading mask was defined with some `hideDelay`,
18  * this flag allows to hide loading mask instantly for this time
19  */
20 loadingMask.hide(true);
21
22 /**
23  * Toggles loading mask
24  * (shows if it was hidden and hides if it was shown)
25  */
26 loadingMask.toggle();
27
28 /**
29  * Same as show();
30  */
31 loadingMask.toggle(true);
32
33 /**
34  * Same as hide();
35  */
36 loadingMask.toggle(false);
37
38 /**
39  * Returns current state of loading mask
40  *  - true if it is shown
41  *  - false if it is hidden
42  */
43 loadingMask.isShown();
44
45 /**
46  * Allows to change loading hint for the instance
47  */
48 loadingMask.setLoadingHint('Processing...');

Markup

The markup of loading a mask is built in the way that allows to show only the top level loading mask. So if your container is covered it and at the same time an element inside your container has its own loading mask shown, then the user will see only the top level of the loading process. And once the top level mask is hidden, they will keep seeing the remaining mask until it gets hidden as well.