How to use custom color for progress bar in Bulma?

Question

I have 3 Bulma progress bars and I'd like to change the value color to be different for each progress bar.

<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress" value="15" max="100">15%</progress>

Changing the SCSS variable $progress-value-background-color makes all progress bar values the same color, which is not what I'd like to happen. I also don't want to use the pre-defined Bulma color classes.

Hylan

Answer 1

You can use your own styles just like "is-success" in the class section, you just have to define your values in the style section

 .progress.is-YOURNAME::-webkit-progress-value {
    background-color: rgba($color: #YOURVALUES, $alpha: 1.0)
  }

  .progress.is-YOURNAME::-moz-progress-bar {
    background-color:rgba($color: #YOURVALUES, $alpha: 1.0)
  }

  .progress.is-YOURNAME::-ms-fill {
    background-color:rgba($color: #YOURVALUES, $alpha: 1.0)
  }

  .progress.is-YOURNAME:indeterminate {
    background-image: linear-gradient(to right, rgba($color: #YOURVALUES, $alpha: 1.0) 30%, #ededed 30%);
  }

Parterre

Answer 2

Just in css and use a class for every progress bar
.progress::-webkit-progress-value {
    background-color: #your-color !important;
}
.progress::-moz-progress-bar {
    background-color: #your-color !important;
}
  
.progress::-ms-fill {
    background-color: #your-color !important;
    border: none;
}

Natheless