I am trying to change the color of circular progress bar provided by AngularMaterial. I have tried changing its color to white using css but it's not working and the color of the progress bar stays BLUE. What am I doing wrong?

.centeredPLEASE_WAIT {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 100%;
  font-size: 20px;
}


.my-circular-progress {
  color: white;
  border-right: #ddd;
  border-left: #ddd;
  border-top: #ddd;
  border-bottom: #ddd;
  background-color: red;
}

            <div class="centeredPLEASE_WAIT">
                <md-progress-circular class="my-circular-progress" md-mode="indeterminate"></md-progress-circular>
            </div>

I am trying to change the color of circular progress bar provided by AngularMaterial. I have tried changing its color to white using css but it's not working and the color of the progress bar stays BLUE. What am I doing wrong?

.centeredPLEASE_WAIT {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 100%;
  font-size: 20px;
}


.my-circular-progress {
  color: white;
  border-right: #ddd;
  border-left: #ddd;
  border-top: #ddd;
  border-bottom: #ddd;
  background-color: red;
}

            <div class="centeredPLEASE_WAIT">
                <md-progress-circular class="my-circular-progress" md-mode="indeterminate"></md-progress-circular>
            </div>

• javascript
• css
• angularjs
• angular-material
• mean-stack

• can u give working url or js fiddle in this? – sansan Commented Jan 12, 2017 at 9:48

2 Answers 2

As you probably know you can change progress bar color by adding angular material class (md-warn md-accent etc.) as it is shown in their demo: https://material.angularjs/latest/demo/progressCircular

But if you want to change it manually, you have to change svg image inside md-progress-circular element. You can do this using this selector:

md-progress-circular svg path { stroke: green; }

you will need to update CSS for below class as i have written below. This will make color kind of dark pink.

md-progress-circular.md-default-theme path, md-progress-circular path {
stroke:rgb(150,90,102);
}

you can change RGB as per your need.