Angular PrimeNG ProgressSpinner属性

Angular PrimeNG是一个开源的库，由原生的Angular UI组件组成，这些组件被用来做伟大的造型，这个框架被用来制作响应式网站，非常容易。在这篇文章中，我们将看到Angular PrimeNG ProgressSpinner Properties.

ProgressSpinner组件用于通知用户一个任务的进度。可以使用下面列出的属性来定制进度旋钮。

Angular PrimeNG ProgressSpinner属性：

• strokeWidth：它定义了圆圈笔触的宽度。它需要一个字符串值，默认值是 “2”。
• fill:它是圆的背景颜色。它需要一个字符串值，默认值为空。
• animationDuration。圆圈完成一次旋转的持续时间。它需要一个字符串值，默认值是 “2s”。

语法:

<p-progressSpinner 
    strokeWidth="..." 
    fill="..." 
    animationDuration="...">
</p-progressSpinner>

创建Angular应用程序并安装模块：

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Project Structure

运行以下命令以启动应用程序：

ng serve --open

例子1：这个例子说明了进度旋转器的strokeWidth和animationDuration属性的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG ProgressSpinner Properties</h3>
  
<p>Stroke Width: 3 and Animation Duration: 3s</p>
<p-progressSpinner 
    strokeWidth="3"  
    animationDuration="3s">
</p-progressSpinner>
  
<p>Stroke Width: 5 and Animation Duration: 1s</p>
<p-progressSpinner 
    strokeWidth="5"  
    animationDuration="1s">
</p-progressSpinner>

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

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

输出:

例子2：这个例子说明了进度旋转器的fill属性的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG ProgressSpinner Properties</h3>
  
<p>ProgressSpinner with background filled</p>
<p-progressSpinner 
    strokeWidth="3"  
    fill="rgba(89, 255, 67, 0.647)"
    animationDuration="3s">
</p-progressSpinner>
  
<p-progressSpinner 
    strokeWidth="3"  
    fill="red"
    animationDuration="3s">
</p-progressSpinner>

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ['./app.component.css']
})
  
export class AppComponent {}

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

输出: