Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Color of ProgressBar

Boris Kemper
6 years ago Nov 27, 2016 2:21pm
Marco Collovati
6 years ago Nov 27, 2016 4:20pm

Hi Boris,
if you are extending valo theme you can use this snippet in your scss (after valo mixin inclusion)

$v-selection-color: #2c9020;
@include valo-progressbar(myprogressbar);

and then in your java code 

ProgressBar progressBar = new ProgressBar(0.5f);

Otherwise, if you want a pure css solution you can use the following rule with your original java code 

.v-progressbar.myprogressbar .v-progressbar-indicator {
    background-color: #2c9020;
    background-image: -webkit-linear-gradient(top, #2f9822 2%, #26811b 98%);
    background-image: linear-gradient(to bottom,#2f9822 2%, #26811b 98%);
    border-color: #227119;


Boris Kemper
6 years ago Nov 28, 2016 8:13am