Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Flashing screen while loading with a custom loadingbar in valo theme
I modified the valo loading curtain to show a "modal" loading circle in the center of the screen.
After a while of loading (> 10s) the screen starts flashing.
I've seen that i'm not the only one having this problem, and i tried the solution from this Post (https://vaadin.com/forum/#!/thread/8771546/8773315)
Now my .scss file looks like this:
.v-window-modalitycurtain {
@include animation(valo-animate-in-fade 400ms 100ms backwards);
}
.v-loading-indicator[style*="none"]:before {
display: none;
}
.v-loading-indicator-delay:before, .v-loading-indicator-wait:before {
content: "";
position: fixed;
background-color: rgba(0,0,0,.5);
background-image: url(images/loading.gif);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: auto
}
Sadly I still have a flashing screen after a while of loading.
Does anybody knows a way how to solve this or sees an error in my code?
I'm using Vaadin v 7.5.7.
Thanks for helping
- another thread on the same topic. Maybe it will be more useful.
Thanks a lot!
Somehow I couldn't find this thread.
The code below fixed my problem. Thanks for helping.
.v-loading-indicator-wait {
width: 96%;
.v-ff & {
width: 90%;
}
@include animation(v-progress-wait 5s forwards, v-progress-wait 4s infinite backwards);
}