PDA

View Full Version : Custom Image Animation for LoadMask



venkatraman
16 Nov 2014, 10:38 PM
Hi everyone,

I was trying to change the load mask image but it was not changing with my custom image.

CSS to change image:
.custom-mask-loading {
background-image: url(http://www.topratedlocal.com/images/loader.gif);
background-position: center center;
}

LoadMask:
var myMask = new Ext.LoadMask(Ext.getBody(), {
cls: 'custom-mask-loading',
msg: 'Please wait...'
});


myMask.show();

Thanks in advance
Venkat

joel.watson
18 Nov 2014, 11:50 AM
Hi venkatraman--

Try adding .x-mask-msg-text to your CSS rule (e.g., .custom-mask-loading .x-mask-msg-text). This will override the default loading icon with yours.

If you want to provide a fuller solution, you could modify $loadmask-msg-inner-icon (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.LoadMask-css_var-S-loadmask-msg-inner-icon) in a custom theme.

Hope that helps!

venkatraman
19 Nov 2014, 11:52 PM
Hi joel watson,

I am using Ext JS 4.0.2a version and I tried modifying default css class but my requirement will be for different place i want to use my custom image to show in the load mask.

.x-mask-msg div{
background-image: url(path);
}

Thanks,
Venkat

ifti
28 May 2016, 2:39 PM
you can use below code and in url tag changes the gif you want


.x-mask-msg-text {
padding: 25px 0 0;
background-image: url(images/wallpapers/loading7_light_blue.gif)!important;
background-repeat: no-repeat;
background-position: center 0;
}