Angular PrimeNG ProgressSpinner

Introduction:

We will learn how to use the ProgressSpinner component in Angular PrimeNG in this tutorial. Additionally, we will learn about the characteristics, style, and respective coding syntaxes.

Properties:

strokeWidth:

It details the circle’s stroke width. It will accept input of the string data type, and the default value is 2.

fill:

It determines the hue of the circle’s backdrop. The default value of the string data type is null.

animationDuration:

It details how long the rotation animation will last. It has a string data type with the value 2s by default.

Styling:

p-progress-spinner:

It is container element.

p-progress-circle:

It is the SVG styling element.

p-progress-path:

It is the circle styling element.

let’s create angular application.

To create angular application run below command in the terminal.

ng new progressspinnerdemo

Install PrimeNG to your angular application.

npm install primeng --save
npm install primeicons --save

app.module.ts

import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ProgressSpinnerModule }
    from 'primeng/progressspinner';
  
@NgModule({
    imports: [
        BrowserAnimationsModule,
        ProgressSpinnerModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

app.component.html

<h4>PrimeNG ProgressSpinner Component</h4>
<p-progressSpinner strokeWidth="4" animationDuration="1s"></p-progressSpinner>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {}

output: