Unable to change color of Loading Indicator in v24.8

Flow
1

We are using v24.8 Flow. We had to change the default color of the Loading Indicator (the UI controlled progress bar) because the default color is the same as our top menu bar. In prior releases this worked:

.v-loading-indicator {
  background-color: #111111;
}

With v24.8 it seems to be ignored.

After reading How to customize the loading indicator in Vaadin we tried a few things:

METHOD 1

.v-loading-indicator.first {
  background-color: green;
}

METHOD 2

.v-loading-indicator.first {
  background-color: green;
}

AND

    public void serviceInit(ServiceInitEvent initEvent) {
        initEvent.getSource().addUIInitListener(uiInitEvent -> {
            LoadingIndicatorConfiguration conf = uiInitEvent.getUI().getLoadingIndicatorConfiguration();

            // disable default theme -> loading indicator isn't shown
            conf.setApplyDefaultTheme(false);

METHOD 2

.v-loading-indicator.first:before {
  background-color: green;
}

With conf.setApplyDefaultTheme(false) and without.

METHOD 3

.v-loading-indicator .first {
  background-color: green !important;
}

With conf.setApplyDefaultTheme(false) and without.

METHOD 4

.v-loading-indicator vaadin-progress-bar {
  --vaadin-progress-value-color: #ff6b6b;
  --vaadin-progress-contrast-color: rgba(255, 107, 107, 0.2);
}


/* Alternative approach */
.v-loading-indicator vaadin-progress-bar::part(bar) {
  background-color: #ff6b6b;
}

With conf.setApplyDefaultTheme(false) and without.

The above css is in “common.css” and loaded:
@CssImport("./styles/mango/common.css")

When we enable the conf.setApplyDefaultTheme(false) code the loading indicator is not displayed at all. When this code is not enabled we see the default loading indicator in the default lumo “blue” color.

Our theme:
@Theme(themeClass= Lumo.class, variant = Lumo.DARK)

Vaadin Flow 24.8.5

Any suggestions would greatly be appreciated!!

2

If you want the loading indicator to be green (for example) at all times, the following style should work.

.v-loading-indicator {
  background-color: green !important;
}

However, your method 1 should also work to make the indicator green after the first delay.
Where have you put the styles? It might be that the dev bundle is not being recreated. Try deleting it (from src/main/bundles) and then run again.

3

There was a recent blogpost about the topic, which includes a link to a sample project: Make the loading indicator in Vaadin great again | Vaadin; the demo is made with 24.8.3, so it should still be applicable also with 24.8.5. Maybe try that one out, too?

4

Found that problem… I was running “gradle vaadinPrepareFrontend” after changing the css file. I forgot I should be doing “gradle vaadinBuildFrontend” which actually rebuilds things from the source css files.

Once I figured that out, this worked:

.v-loading-indicator {
background-color: green !important;
}

The LoadingIndicatorConfiguration.setApplyDefaultTheme(false) was not needed. The docs are definitely confusing about this part.

Thanks for everyone’s help on this!