primeng
primeng copied to clipboard
Transition colors can not be changed on ProgressSpinner
Describe the bug
Changing the transition colors of the ProgressSpinner do not work correctly.
Environment
OS: darwin arm64
Reproducer
https://stackblitz.com/edit/github-e9czg6?file=src/app/app.component.css
Angular version
14.0.7
PrimeNG version
14.0.0
Build / Runtime
Angular CLI App
Language
TypeScript
Node version (for AoT issues node --version)
16.13.1
Browser(s)
No response
Steps to reproduce the behavior
In the documentation it states that this can be changed by applying following condition:
<p-progressSpinner></p-progressSpinner>
@keyframes p-progress-spinner-color {
100%,
0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
The two below examples are working locally but not in stackblitz for unknown reason:
<p-progressSpinner styleClass="custom-spinner"></p-progressSpinner>
@keyframes custom-progress-spinner-color {
100%,
0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
It is also possible to change that it can only have one color:
.p-progress-spinner-circle {
stroke: #d62d20 !important;
}
which makes it kind of basic but fine.
Expected behavior
Be able to change the transition colors of the ProgressSpinner.
- Find out what works to change the color
- Change the description of what actually works in the documentation
- Check that other properties aren't affected in the same way