How to change the progress bar color?

1
  How can I change the progress bar default color in SASS? I tried to change the value of many default progress-bar classes in the lib folder, but nothing changed. I also tried to disable default bootstrap styling for the progress bar widget, in case if it overwrites custom styling, but nothing changed.
asked
2 answers
4

You can alter the background of the default progressbar by changing .mx-progress{background: ….}

The sliding thingy can be set with the class .mx-progress-indicator:before{background:….}

answered
-1

I have styled some progress bars by applying classes to them and using this scss

 

.widget-progress-bar.progress-distance-ahead .progress-bar {

    background-color: $brand-success;

}

.widget-progress-bar.progress-distance-behind .progress-bar {

    background-color: $brand-danger;

}

.progress-distance-behind > .progress {

    background-color: $brand-danger-background;

    width:$progress-size;

}

.progress-distance-ahead > .progress {

    background-color: $brand-success-background;

    width:$progress-size;

}

answered