如何更改 CircularProgress 条的颜色

Question

我正在尝试更改 AngularMaterial 提供的圆形进度条的颜色。我已尝试使用 css 将其颜色更改为白色，但它不起作用并且进度条的颜色保持蓝色。我做错了什么？

.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

正如您可能知道的，您可以通过添加 angular material class（md-warn md-accent 等）来更改进度条颜色，如他们的演示所示：https://material.angularjs.org/latest/demo/progressCircular

但是如果你想手动更改它，你必须在 md-progress-circular 元素内更改 svg 图像。您可以使用此选择器执行此操作：

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

Answer 2

您将需要更新 CSS 以下内容 class 正如我在下面所写的那样。这将使颜色有点深粉红色。

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

您可以根据需要更改 RGB。

如何更改 CircularProgress 条的颜色

How to change the color of CircularProgress bar

javascript

css

angularjs

mean-stack

angular-material