Hello,
I just wanted to have some animated progress bars.
They get the style name “timerbar”.
This is my CSS Code:
[code]
.timerbar > .v-progressbar-wrapper > .v-progressbar-indicator {
animation: 3s linear 0s normal none infinite running animate-stripes !important;
background-color: #34c2e3 !important;
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;
background-size: 30px 30px !important;
border-radius: 3px !important
transition: width 0.4s ease-in-out 0s !important;
}
@keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
[/code]The problem: It seems like the parser skips the 4.th line with the linear-gradient.
When my page loads a simple progress bar is displayed. When I analyze (e.g. with firebug) the progressbar
there is no “background-image” property. Or better said - there is one but from the default stylesheet and not mine.
I can add
“background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent) !important;”
manually via Firebug to my css class and it works.
I fixed my issue by creating a single CSS file with all that stuff inside. This file can be imported via @StyleSheet(value = {mycss.css}). When I go this way everything works as expected. My progressbar is animated :o).
Hence I guess there is a bug in the SCSS Compiler… ?!
Best regards