red line across top of page...loading?

Running Vaadin 7.3.4.

When using Valo, there is a red line that grows from left to right at the top of the page. It happens periodically (maybe every 10 seconds) - which may coincide with the use of the Refresher plugin.

  • What is the name of this feature?
  • How can it be customized?
  • How can it be turned off?

Thanks in advance.

Hi John,

That line would be the new loading indicator (previously the white/yellow/red spinners).

I assume you have changed the $v-background-color or $v-app-background-color variables to white? This will turn the focus color hue to zero, which equals red. If you want white as the background color, but want some other hue, you can use hsl colors:

$v-app-background-color: hsl(210, 0%, 100%);

You can also customize the focus color or loading indicator color separately:

$v-focus-color: #1fd6ff;
$v-loading-indicator-color: #8f8f8f;

You can’t really turn off the loading indicator, but you can override the mixin that generates those styles, if you wish. Then you will need to create your own custom loading indicator instead:

@mixin valo-loading-bar {
  // Just leave empty

The variables need to be defined before you @import “…/valo/valo”;
but any mixin or function overrides need be done after that, but before you @include valo;


Yes, Refresher is very likely the cause of it flashing. Not really much you can do about it, I guess, since I don’t think Vaadin offers a way for add-ons to by-pass the loading indicator triggering.

The loading indicator is triggered after 300ms of delay, so if a request is faster than than, then it will not be visible. There’s currently no way to customize this delay in Valo, but there should be. You can create a ticket about that if you wish.

Thanks Jouni!

Setting ‘$v-loading-indicator-color: $mycustomcolor’ remedies the solution nicely.

btw, Valo looks awesome! Great work!