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

scyqe7ek 于 2023-04-08 发布在其他

关注(0)|答案(4)|浏览(425)

我正在使用primeng版本11，我试图改变微调栏的颜色，我试图复制代码形式primeng，但它不为我工作。
html：<p-progressSpinner [style]="{width: '50px', height: '50px'}" styleClass="custom-spinner"></p-progressSpinner>
css：

@keyframes custom-progress-spinner-color {
    100%,
    0% {
        stroke: #16697A;
    }
    40% {
        stroke: #489FB5;
    }
    66% {
        stroke: #82C0CC;
    }
    80%,
    90% {
        stroke: #FFA62B;
    }
}

模块已导入并检查了所有内容。

css

来源：https://stackoverflow.com/questions/68183122/primeng-v11-progress-spinner-does-not-change-color

4条答案

按热度按时间

cedebl8k1#

您可以使用相同的类名，而不需要新的：

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

        to {
            stroke: #yourColor;
        }
    }
`]

}）
甚至你也可以使用“from”和“to”，它们相当于百分比...干杯！！！See the doc for reference

赞(0）回复(0）举报 2023-04-08

v8wbuo2f2#

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

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

赞(0）回复(0）举报 2023-04-08

djp7away3#

你应该在你的'@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;
     }
   }
 }

赞(0）回复(0）举报 2023-04-08

fhity93d4#

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

赞(0）回复(0）举报 2023-04-08