Hello @bbros!
You are on the right path there. But the CSS rules are wrong. In order to replace the right place with the custom icon, you should do some proper CSS rules. And the "dot" before the CSS rule name is important. Read about it here:
CSS .class Selector.
Well, going into details on CSS is beyond the scope of Ext.NET support but we can give guidelines assuming you have experience with CSS. A good aid into determining the selector could be following this:
1. change your page so that the mask stays forever (remove the redirect from your line 21)
2. load the page and click the test button, so that the mask appears and stays
3. open the web browser's developer tools (if not open already, it does not matter). Usually shortcut key is F12.
4. right-click over the mask text or original "spinning" icon so that browser's context menu appears
5. click "inspect" (or "inspect element" in some browsers)
This will take you to the DOM explorer of the page, and will show the HTML5 markup code down to the mask, revealing on each levels the whole cascade of CSS rules. Here comes the need for CSS skills, which is essentinal for most style customization in Ext.NET.
There, you will see your
'myicon' class set on a Div element with also the
'x-mask-msg' CSS class. But that's not the element exactly surrounding the text and, if you inspect down to the innermost HTML div, closing in to the mask text message, you will see (in the right pane, showing affecting CSS styles on the selected HTML element) that there's a CSS rule affecting the background image and that will override your rule, set in an upper level of the "cascade".
And to fix that, all you have to do, is tailor your CSS selector to affect cascaded elements affecting that one, which would be something like:
.myicon .x-mask-msg-text {
background-image: url(https://itopia.com/wp-content/themes/itopia/img-cloud/loader.gif);
}
Notice now not only the "myicon" text begins with a ".", but also the background-image specification is different. So that's why I am assuming you are not very acquainted with CSS. Knowing how it works is very useful for customizing Ext.NET, and there's a good amount of resources around the web for good guides. Googling specific questions also most time leads you to very useful stackoverflow answered questions, from my experience.
Just to make the sample a proper "working" sample, the custom image you used is way too big and will just not fit the window. With the code above you'll see but a small part of the figure animating in the box.
With this few more lines on your CSS rule, then it becomes alright:
.myicon .x-mask-msg-text {
background-image: url(https://itopia.com/wp-content/themes/itopia/img-cloud/loader.gif);
background-size: 32px 32px;
padding: 38px 0 0
}
Then you have the custom figure in the same position the original one goes.
At this point you have all you need to properly use your custom animated icon on your loader mask. Remember, although you used in the CSS specification
.myicon, on your code behind or markup, when you specify
maskCfg.MsgCls, the dot does not carry in. I mean, you still bind the CSS class to the component via:
maskCfg.MsgCls = "myicon"
All that's left then should be to customize further the CSS rule to place the animation to the right. This shouldn't be a problem for an experienced web designer, but let us now if you still can't get it to work the way you need and we'll try and help you.