ProgressSpinner ProgressSpinner is a process status indicator.

Basic

Custom

Import


import {ProgressSpinnerModule} from 'primeng/progressspinner';

Getting Started

ProgressSpinner is defined using p-progressSpinner element.


<p-progressSpinner></p-progressSpinner>

Colors

Colors of the spinner can be changed by overriding the keyframes animation


@keyframes ui-progress-spinner-color {
    100%,
    0% {
        stroke: #d62d20;
    }
    40% {
        stroke: #0057e7;
    }
    66% {
        stroke: #008744;
    }
    80%,
    90% {
        stroke: #ffa700;
    }
}

Properties

Name	Type	Default	Description
strokeWidth	string	2	Width of the circle stroke.
fill	string	null	Color for the background of the circle.
animationDuration	string	2s	Duration of the rotate animation.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
ui-progress-spinner	Container element.
ui-progress-circle	SVG element.
ui-progress-path	Circle element.

Dependencies

None.

View on GitHub


<h3>Basic</h3>
<p-progressSpinner></p-progressSpinner>

<h3>Custom</h3>
<p-progressSpinner [style]="{width: '50px', height: '50px'}" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"></p-progressSpinner>