'Primeng v11 progress spinner does not change color

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.

htmlcssangularprimeng


Solution 1:[1]

You can just use the same class name, no need for a new one:

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

        to {
            stroke: #yourColor;
        }
    }
`]

})

Even you can use 'from' and 'to' which are equivalent to percentages... cheers!!! See the doc for reference

Solution 2:[2]

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

Solution 3:[3]

I had the same issue, the only thing I could do was to override the CSS rule for stroke color with important. Then you only have one color and no gradient but at least that worked:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daniel Cruz
Solution 2 thelemondropkid
Solution 3 banz

Related Questions