does not seem to do anything… However
does seem to work.

The hieght for --wait is set in the keyframe and overrides any other styling i place on it;

@keyframes v-progress-wait {
0% {
width: 90%;
height: 4px;
3% {
width: 91%;
height: 6px;
100% {
width: 96%;
height: 6px;

This is my code:

$v-loading-indicator-bar-height: 35px;
$v-loading-indicator-bar-height–wait: 35px;

Have anyone a solution for this?

Thanks in advance!

(Running vaadin version 7.6.1)

I think you may be setting the variables too late in your SCSS file. The heights in the keyframes should include both variables, $v-loading-indicator-bar-height as well as $v-loading-indicator-bar-height–wait, and I don’t see “35px” anywhere in the keyframes in your post.

Can you confirm that you are setting them in your theme’s scss file before the theme mixin definition? For example:

@import "../valo/valo.scss";

// SCSS Variable assignments go here 
$v-loading-indicator-bar-height: 35px;
$v-loading-indicator-bar-height--wait: 35px;

@mixin mytheme {
  @include valo;

  // Other stuff goes here

– AC

No i did not, that solved it!

Thanks you!!