Want to know more?
We are happy to help

GET IN TOUCH

Want to know more?
We are happy to help

GET IN TOUCH

WE ARE HAPPY
TO HELP YOU

If you wish to contact us, please fill in the
form and submit it.

Customizable Loading Masks for Ext JS

Customizable Loading Masks for Ext JS

Whenever some data is to be loaded it is a common practice to show a loading mask image to notify the user of the same. It can be disappointing to see a boring loading mask when you expect some real data to be represented. There are options like ‘Skeleton Screens’ which help users know which data will be loaded where; but even with them being implemented, there could still be cases where a loading mask needs to be shown. For example, loading data inside a grid, tree etc. 
In many such situations loading masks are preferred. But the question to be asked is, do we use a single, boring option provided to us or can we make them look better or suit our brand colors?

Why use a loading mask?

Usually, when an application requests the server to provide data, the response depends on the quality of code, the network speed and several other constraints. Instead of pushing the user to a confused state as to what is happening post his action, it is advisable to display a loading mask. Thus, the user can be provided with the notion of some progress from his previous state.

What Ext JS provides out-of-the-box?

Ext JS provides a simple loading mask with a spinner and default message that says ‘Loading…’, which masks the content behind. In some cases, like after a login button click or any Ajax requests, the developer has to initiate and handle the masking and unmasking. In other cases, like a grid store load, Ext JS handles the masking and unmasking by default; this is so, provided the ‘loadingText’ attribute in the config is not set to false.

Can we get fancy?

The power of Ext JS to extend components allows us to customize the loading mask with minimal steps and ensure that it reflects across your application without the need of code change while implementing.
Some examples of customized loading masks are provided below:

Implementation:

Provided below, is a simple way to implement a customized loading mask.

Javascript:

Core concept:

Override the ‘getTemplate’ method of ‘Ext.LoadMask’ and mention the class name in which you have the spinner styling at cls config.

    getTemplate: function () {
        return [{
            //it needs an inner, so it can be centered within the mask, and have a background
            reference: 'innerElement',
            cls: 'custom-loading-container',
            children: [
                //the elements required for the CSS loading {@link #indicator}
                {
                    reference: 'indicatorElement',
                    cls: 'blob-1',
                },
                {
                    reference: 'indicatorElement1',
                    cls: 'blob-2',
                },
                //the element used to display the {@link #message}
                {
                    reference: 'messageElement',
                    cls:'loading'
                }
            ]
        }];
    }

This is the SCSS constructor:

html,body{
	background:#000;
	margin:0;
    .custom-loading-container{
        width:400px;
        height:400px;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        background:#000;
        filter: blur(10px) contrast(20);
    }
    .loading{
        color:#ffffff;
        text-align: center;
        font-size: 24px;
    }
    .blob-1,.blob-2{
        width:70px;
        height:70px;
        position:absolute;
        background:#fff;
        border-radius:50%;
        top:50%;left:50%;
        transform:translate(-50%,-50%);
    }
    .blob-1{
        left:20%;
        animation:osc-l 2.5s ease infinite;
    }
    .blob-2{
        left:80%;
        animation:osc-r 2.5s ease infinite;
        background:#0ff;
    }
}

@keyframes osc-l{
	0%{left:20%;}
	50%{left:50%;}
	100%{left:20%;}
}
@keyframes osc-r{
	0%{left:80%;}
	50%{left:50%;}
	100%{left:80%;}
}

To conclude, customizable loading masks provided by Ext JS are a good way to add some creative interaction between the user and system while some background processes are being run. The ease of implementation and the extent of customization makes it a good addition to the Ext JS stack.

4
Leave a Reply

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
VaniceluserVignesh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Vignesh
Guest
Vignesh

Great article.!

I am new to ExtJS and I am looking forward to more articles related to the same as I could see that you are Platinum partners for Sencha.

celuser
Admin

Yes, sure. We will definitely publish more informative articles on Ext JS. Stay tuned!

Vani
Guest
Vani

Wow. I was looking for a custom loading mask for my modern application. Guys, you made my day.

celuser
Admin

Thank you. Stay tune for the updates.