How to change the color of CircularProgress bar

Question

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>

Answer 1

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.org/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; }