import ProgressSpinner from 'primevue/progressspinner';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/progressspinner/progressspinner.min.js"></script>
ProgressSpinner is defined using ProgressSpinner element.
<ProgressSpinner />
Colors of the spinner can be changed by overriding the keyframes animation.
@keyframes p-progress-spinner-color {
100%,
0% {
stroke: #d62d20;
}
40% {
stroke: #0057e7;
}
66% {
stroke: #008744;
}
80%,
90% {
stroke: #ffa700;
}
}
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| 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. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-progress-spinner | Container element. |
| p-progress-circle | SVG element. |
| p-progress-path | Circle element. |
ProgressSpinner components uses progressbar role. Value to describe the component can be defined using aria-labelledby and aria-label props.
<ProgressSpinner aria-label="Loading" />
Component does not include any interactive elements.
None.