Custom LoadingIndicator

Flow
1

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

2

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

3

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 ?

4

Hey Guillaume,

Yeah, that might be difficult. I’ve personally never done that using SCSS, but anything’s possible right? :wink: 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/.)

5

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…

6

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.