ProgressSpinnerProgressSpinner is a process status indicator.

ProgressSpinner - 图1

Documentation

Import

  2. import {ProgressSpinnerModule} from 'primeng/progressspinner';
  3.  

Getting Started

ProgressSpinner is defined using p-progressSpinner element.

  2. <p-progressSpinner></p-progressSpinner>
  3.  

Colors

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

  2. @keyframes ui-progress-spinner-color {
  3.     100%,
  4.     0% {
  5.         stroke: #d62d20;
  6.     }
  7.     40% {
  8.         stroke: #0057e7;
  9.     }
  10.     66% {
  11.         stroke: #008744;
  12.     }
  13.     80%,
  14.     90% {
  15.         stroke: #ffa700;
  16.     }
  17. }
  18.  

Properties

NameTypeDefaultDescription
strokeWidthstring2Width of the circle stroke.
fillstringnullColor for the background of the circle.
animationDurationstring2sDuration of the rotate animation.

Styling

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

NameElement
ui-progress-spinnerContainer element.
ui-progress-circleSVG element.
ui-progress-pathCircle element.

Dependencies

None.

Source

View on GitHub

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