Loading Indicator Not Showing

I am in the process of moving my app from 2.0 to 2.1.

The main issue I have encountered is that the loading indicator 'propeller' is not showing, the message shows, code here:

Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Processing Email ',
indicator: true
});

Any ideas?

It's working for me. Is this issue happen when you have your own CSS (compiled SASS)?

No - everything is 'out of the box'

Ok... then in that case it's working for me. The spinner is spinning, text is showing, things are masked.

Any suggestions of why it is working for you and not for me?

You are not the only one. Apparently there is something wrong with the CSS. Credits to xpironJB

Quote:

---

Originally Posted by xpironJB

By comparing functional and non-functional version we extracted missing CSS-definitions.
For a quick fix integrate following CSS-definitions into a separate CSS-file (so you can remove this quickly, when bug was fixed) and include it into your project:

Code:

---

.x-loading-spinner{font-size:250%;height:1em;width:1em;position:relative;-webkit-transform-origin:.5em .5em}
.x-loading-spinner>span,.x-loading-spinner>span:before,.x-loading-spinner>span:after{display:block;position:absolute;width:.1em;height:.25em;top:0;-webkit-transform-origin:.05em .5em;-webkit-border-radius:.05em;border-radius:.05em;content:" "}
.x-loading-spinner>span.x-loading-top{background-color:rgba(170,170,170,0.99)}
.x-loading-spinner>span.x-loading-top::after{background-color:rgba(170,170,170,0.9)}
.x-loading-spinner>span.x-loading-left::before{background-color:rgba(170,170,170,0.8)}
.x-loading-spinner>span.x-loading-left{background-color:rgba(170,170,170,0.7)}
.x-loading-spinner>span.x-loading-left::after{background-color:rgba(170,170,170,0.6)}
.x-loading-spinner>span.x-loading-bottom::before{background-color:rgba(170,170,170,0.5)}
.x-loading-spinner>span.x-loading-bottom{background-color:rgba(170,170,170,0.4)}
.x-loading-spinner>span.x-loading-bottom::after{background-color:rgba(170,170,170,0.35)}
.x-loading-spinner>span.x-loading-right::before{background-color:rgba(170,170,170,0.3)}
.x-loading-spinner>span.x-loading-right{background-color:rgba(170,170,170,0.25)}
.x-loading-spinner>span.x-loading-right::after{background-color:rgba(170,170,170,0.2)}
.x-loading-spinner>span.x-loading-top::before{background-color:rgba(170,170,170,0.15)}
.x-loading-spinner>span{left:50%;margin-left:-0.05em}
.x-loading-spinner>span.x-loading-top{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
.x-loading-spinner>span.x-loading-right{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}
.x-loading-spinner>span.x-loading-bottom{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
.x-loading-spinner>span.x-loading-left{-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg)}
.x-loading-spinner>span::before{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg)}
.x-loading-spinner>span::after{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg)}
.x-loading-spinner{-webkit-animation-name:x-loading-spinner-rotate;-webkit-animation-duration:.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear}
@-webkit-keyframes x-loading-spinner-rotate{0%{-webkit-transform:rotate(0deg)}
8.32%{-webkit-transform:rotate(0deg)}
8.33%{-webkit-transform:rotate(30deg)}
16.65%{-webkit-transform:rotate(30deg)}
16.66%{-webkit-transform:rotate(60deg)}
24.99%{-webkit-transform:rotate(60deg)}
25%{-webkit-transform:rotate(90deg)}
33.32%{-webkit-transform:rotate(90deg)}
33.33%{-webkit-transform:rotate(120deg)}
41.65%{-webkit-transform:rotate(120deg)}
41.66%{-webkit-transform:rotate(150deg)}
49.99%{-webkit-transform:rotate(150deg)}
50%{-webkit-transform:rotate(180deg)}
58.32%{-webkit-transform:rotate(180deg)}
58.33%{-webkit-transform:rotate(210deg)}
66.65%{-webkit-transform:rotate(210deg)}
66.66%{-webkit-transform:rotate(240deg)}
74.99%{-webkit-transform:rotate(240deg)}
75%{-webkit-transform:rotate(270deg)}
83.32%{-webkit-transform:rotate(270deg)}
83.33%{-webkit-transform:rotate(300deg)}
91.65%{-webkit-transform:rotate(300deg)}
91.66%{-webkit-transform:rotate(330deg)}
100%{-webkit-transform:rotate(330deg)}
}

---

Have fun when wheels are turning... ;)

---

Great stuff ... my spinners are spinning again!

Had the exact same issue today too, and the fix ingo.hefti posted worked great.

Thanks so much!

spinners no longer working for me either.