Primeng v11 进度微调器不改变颜色

Answer 1

我遇到了同样的问题，我唯一能做的就是用 important 覆盖描边颜色的 CSS 规则。那么你只有一种颜色，没有渐变，但至少有效：

.p-progress-spinner-circle {
  stroke: #yourColor !important;
}

Answer 2

您可以使用相同的类名，无需新的：

@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styles: [`
    @keyframes p-progress-spinner-color {
        from {
            stroke: #yourColor;
        }

        to {
            stroke: #yourColor;
        }
    }
`]

}）

甚至你可以使用“from”和“to”，它们相当于百分比......干杯！！！ 请参阅文档以供参考

Answer 3

您应该在“@keyframes”代码块之前放置以下 CSS（在我的示例中为 SASS）：

.ui-progress-spinner {
  &.custom-spinner {
    .ui-progress-spinner-circle {
      animation:
        ui-progress-spinner-dash 1.5s ease-in-out infinite,
        custom-progress-spinner-color 6s ease-in-out infinite;
     }
   }
 }

Answer 4

您需要重写动画本身，primeNg issues中有一个工作示例https://github.com/primefaces/primeng/issues/9232

Answer 5

您可以按如下方式更改微调器的颜色。

<p-progressSpinner class="spinner"></p-progressSpinner>

.spinner ::ng-deep .p-progress-spinner-circle {
  stroke: white !important;
}