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.
Custom LoadingIndicator
Hi all,
I'm trying to find a way to customize the LoadingIndicator....
I've well understood that this component is manage by the vaadin core itself and we don't have a lot of control on it.
However, I'd like to improve the indicator with a text ("Page 'Hello World' Loading...") in the middle of the bar (for the valo theme) or below the turning icon (standard theme)...
Is there a way to create this specific component and to set it in the UI (as we set the LoadingIndicatorConfiguration)?
Simon
Hey Simon,
Do you mean something like $v-app-loading-text? It's defined as "A static text which is shown under the initial loading spinner when the application assets are loaded by the browser. The default is an empty string."
Source: https://vaadin.com/wiki/-/wiki/Main/Valo+theme+-+Getting+started
Thank you for your answer Joacim, but the text should be dynamic and translated in different languages... Is it possible to make that in a SCSS file ?
Guillaume Flament: Thank you for your answer Joacim, but the text should be dynamic and translated in different languages... Is it possible to make that in a SCSS file ?
Hey Guillaume,
Yeah, that might be difficult. I've personally never done that using SCSS, but anything's possible right? ;) Not sure how viable that is, though. If it's only the loading text, I gotta believe it's doable. How many languages do you need to support?
(For more information regarding SCSS (or SASS more specifically), check out http://sass-lang.com/.)
Hello Joacim,
It's possible to make stylesheet dynamic and I can do it with PHP but with a preprocessor and a framework, I don't know.
Actually we need 6 languages different but later, we aims a lot of languages.
Perhaps load a different stylesheet for each languages...
Ideally, you'd only have to set one variable. My initial idea was to add a style name to the UI class, and set the $v-app-loading-text variable based on that.
That didn’t work as v-loading-app is not a child of v-ui, and I wasn’t able to target v-app.
However, Jouni said that could be done using a bootstrap listener. More info here: https://vaadin.com/wiki/-/wiki/Main/Customizing+the+startup+page+in+an+application
So, if you manage to add a style name to any div that is a parent of v-loading-app, you could do something like this in your theme:
.english .v-app-loading:after {
content: “Loading”;
}
.spanish .v-app-loading:after {
content: “Cargando”;
}
etc.