How to change size of Spinner in Valo

I need to make the spinner that briefly appears during time consuming operations larger. Similarly to how the Valo sampler has it (about 3 times bigger than the default size). How do I do that?

The default value for the spinner comes from the valo-spinner mixin where the size 24px is the default parameter for the mixin. The easiest way to change is to create your own style for the spinner and use the mixin there with a size parameter.

Here’s an example:

Java:

Label label = new Label(); label.addStyleName("myspinner"); SASS:

.myspinner {
        @include valo-spinner(72px);
}

Thanks but I want to modify the spinner that Vaadin shows by default.(ie, It is not a label that I control)

For example, when switching tabs on a tabsheet and that triggers a time consuming event, Vaadin will show a spinner on that tab before showing my GUI on it. Users are complaining that it is too small and that don’t know why the tab is not populated so they click on a different tab or navigate away.

You mean loading indicator? In valo theme, that’s not a spinner anymore but a progress bar at the top of the page. See http://demo.vaadin.com/valo-theme/#!common. Do you have your custom theme for loading indicator?

I get both, a progress bar at the top AND a spinner. Please see attached image.

In fact I just checked the Valo theme demo (http://demo.vaadin.com/valo-theme/#!tabs) and you can see the same behavior when you click on tabs. It might be a TabSheet theme specification. I just can’t find it…
17003.jpg

Ok. Looking at the Valo source for tabsheet (VAADIN/themes/valo/components/_tabsheet.scss) I see the specification for the spinner. Not sure how do I override/customize the size for my tabsheet though…

Adding this to my theme did the trick

    .v-tabsheet-deco {
        height: 60px !important;
        width: 60px !important;
    }

This doesn’t appear to affect anything else and it seems to work in Chrome,FF and IE. So I’m going to go with it unless someone suggests a more elegant solution :slight_smile:

Thanks for helping me work through this.

Iyad Nahas:
I get both, a progress bar at the top AND a spinner. Please see attached image.

In fact I just checked the Valo theme demo (http://demo.vaadin.com/valo-theme/#!tabs) and you can see the same behavior when you click on tabs. It might be a TabSheet theme specification. I just can’t find it…

Just in case if someone needs, the tabsheet changing spinner color defined with $v-focus-color. So if you want to change it (as I wanted), you have to overwrite the $v-focus-color SCSS variable in your application mixin part. In mine I changed from default valo blue to green: $v-focus-color: #79C141;
Cheers! Károly