primeng icon indicating copy to clipboard operation
primeng copied to clipboard

Transition colors can not be changed on ProgressSpinner

Open quranc opened this issue 2 years ago • 0 comments

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

quranc avatar Aug 09 '22 06:08 quranc