如何更改 CircularProgress 栏的颜色

Posted 2023-03-06

【中文标题】如何更改 CircularProgress 栏的颜色

【英文标题】：How to change the color of CircularProgress bar

【发布时间】：2017-05-27 08:29:56

【问题描述】：

我正在尝试更改 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>

【问题讨论】：

你能在这个中提供工作 url 或 js fiddle 吗？

【参考方案1】：

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

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

md-progress-circular svg path  stroke: green; 

【讨论】：

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

使用您的特定 md-progress-circular 的类或 id 而不是 'md-progress-circular' :)

例如：.my-circular-progress svg path stroke: green;

【参考方案2】：

您将需要更新以下类的 CSS，正如我在下面所写的。这会使颜色变成深粉色。

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

您可以根据需要更改 RGB。