如何在Bulma中为进度条使用自定义颜色？

Question

我有三个Bulma进度条，我想为每个进度条更改值的颜色以使它们不同。

<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>

更改 SCSS 变量 $progress-value-background-color 会使所有进度条的值颜色相同，这不是我想要的结果。我也不想使用预定义的 Bulma 颜色类。

- Moody

Answer 1

您可以像“is-success”一样在类别部分使用自己的样式，只需在样式部分定义您的值即可。

 .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%);
  }

- Róbert Wágner

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;
}

- HamzaElkotb