Loading Indicator Not Showing

[pthirlby]

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?

[mitchellsimoens]

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

[pthirlby]

No - everything is 'out of the box'

[mitchellsimoens]

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

[pthirlby]

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

[ingo.hefti]

You are not the only one. Apparently there is something wrong with the CSS. Credits to 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:

.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...

[pthirlby]

Great stuff ... my spinners are spinning again!

[DonM]

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

Thanks so much!

[BostonMerlin]

spinners no longer working for me either.