Componente Angular PrimeNG ProgressSpinner

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente ProgressSpinner en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

ProgressSpinner: este componente se usa para hacer una rueda que ilustra el estado del proceso.

Propiedades:

• strokeWidth: Especifica el ancho del trazo del círculo. Acepta un tipo de datos de string como entrada y el valor predeterminado es 2.
• relleno: Especifica el color para el fondo del círculo. Es de tipo de datos de string, el valor predeterminado es nulo.
• animationDuration: Especifica la duración de la animación de rotación. Es de tipo de datos de string, el valor predeterminado es 2s.

Estilo:

• p-progress-spinner: es el elemento contenedor.
• p-progress-circle: es el elemento de estilo SVG.
• p-progress-path: Es el elemento de estilo del círculo.

Creación de aplicaciones angulares e instalación de módulos:

Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto: después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente ProgressSpinner.

<h2>GeeksforGeeks</h2>
<h5>PrimeNg ProgressSpinner Component</h5>
<p-progressSpinner></p-progressSpinner>

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

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

Producción:

Ejemplo 2: En este ejemplo, usaremos las propiedades strokeWidth, fill y animationduration en el componente ProgressSpinner.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG ProgressSpinner Component</h5>
<p-progressSpinner strokeWidth="5" fill="#03fc24" 
                   animationDuration="1s"></p-progressSpinner>

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

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

Producción: 

Referencia: https://primefaces.org/primeng/showcase/#/progressspinner