<mat-progress-spinner>在角材料中

角材料（Angular Material）是一个UI组件库，旨在使Web应用的开发更加容易和快速。其中一个组件是<mat-progress-spinner>，用于在应用程序中显示旋转动画和进度指示器。在本篇介绍中，我们将深入探讨这个组件的使用方法和属性。

基本用法

<mat-progress-spinner>组件的基本用法非常简单。只需要在模板中添加以下代码即可：

<mat-progress-spinner></mat-progress-spinner>

该代码将显示一个默认颜色、默认尺寸和无限旋转的进度指示器。如果需要定义颜色或尺寸，则可以使用以下属性。

属性

mode

mode属性用于控制进度指示器的模式。默认值为determinate，表示进度条具有确定性。也就是说，你需要指定一个值来显示进度指示器。当然，你还可以将它设置为indeterminate，这样进度指示器就会无限旋转，而不需要指定百分比。

<mat-progress-spinner mode="determinate" value="50"></mat-progress-spinner>
<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>

color

color属性用于定义进度指示器的颜色。默认值为primary。你可以将它设置为任何预定义颜色，如accent或warn，也可以指定任何有效的CSS颜色值。

<mat-progress-spinner color="primary"></mat-progress-spinner>
<mat-progress-spinner color="accent"></mat-progress-spinner>
<mat-progress-spinner color="warn"></mat-progress-spinner>
<mat-progress-spinner color="#007bff"></mat-progress-spinner>

value

value属性用于定义进度指示器的百分比值。此属性仅在mode属性设置为determinate时才有效。

<mat-progress-spinner mode="determinate" value="25"></mat-progress-spinner>
<mat-progress-spinner mode="determinate" value="50"></mat-progress-spinner>
<mat-progress-spinner mode="determinate" value="75"></mat-progress-spinner>

diameter

diameter属性用于定义进度指示器的直径。默认值为48像素。

<mat-progress-spinner diameter="24"></mat-progress-spinner>
<mat-progress-spinner diameter="96"></mat-progress-spinner>

strokeWidth

strokeWidth属性用于定义进度指示器的轮廓宽度。默认为4像素。

<mat-progress-spinner strokeWidth="2"></mat-progress-spinner>
<mat-progress-spinner strokeWidth="8"></mat-progress-spinner>

常用函数

<mat-progress-spinner>组件还提供了一些常用的函数，方便对进度指示器进行编程控制。

start()

start()函数用于启动进度指示器的旋转动画。

<mat-progress-spinner #spinner></mat-progress-spinner>
<button (click)="spinner.start()">Start</button>

stop()

stop()函数用于停止进度指示器的旋转动画。

<mat-progress-spinner #spinner></mat-progress-spinner>
<button (click)="spinner.start()">Start</button>
<button (click)="spinner.stop()">Stop</button>

总结

<mat-progress-spinner>组件是一个方便的进度指示器，可以轻松地为应用程序增加一些视觉元素。它有许多可自定义的属性和函数，以满足各种不同的需求。我们希望这篇介绍对你有帮助！