ProgressSpinnerProgressSpinner is a process status indicator.
Documentation
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.
Source
<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>