Primeng v11 progress spinner does not change color

Question

I'm using primeng version 11, and I'm trying to change the color of the spinner bar, I tried copying the code form primeng but it did not work for me.

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;
    }
}

module is imported and checked everything.

Answer 1

You should putt the following CSS (In my example it's SASS) before your '@keyframes' code block:

.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;
     }
   }
 }