如何更改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>

- user2498079

---

你能提供一个可以工作的 URL 或 JS Fiddle 吗？ - sansan

Answer 1

您可能已经知道，可以通过添加Angular Material类（md-warn md-accent等）更改进度条颜色，就像它在演示中所展示的一样：https://material.angularjs.org/latest/demo/progressCircular

但如果您想手动更改它，则必须更改md-progress-circular元素内部的SVG图像。您可以使用以下选择器来执行此操作：

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

- Patryk Łucka

---

我该如何将其分配给特定的md-progress-circular？ - user2498079

请使用您特定的'md-progress-circular'类或ID，而不是默认的类名'md-progress-circular' :) - Patryk Łucka

.my-circular-progress svg path { stroke: green; } - Patryk Łucka

Answer 2

您需要根据我以下的编写更新下面类的CSS。这将使颜色变为深粉色。

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

您可以根据需要更改RGB。

- pathak tejpal