Angular Material 进度条

<mat-progress-bar> 是一个水平进度条，用于指示进度和活动。

进度条模式

它支持四种模式：确定、不确定、缓冲和查询。

确定型

确定操作是那些操作百分比已完成的操作。

app.component.html

app.component.ts

输出

这是默认模式，value 属性表示进度。

不确定

在不确定操作中，要求用户等待直到上一个操作完成，并且不需要指示它将使用多少时间的不确定指针。

app.component.html

app.component.ts

输出

在此模式下，value 属性被忽略。

Buffer

使用进度条的缓冲模式来指示服务器的活动或加载。

app.component.html

app.component.ts

输出

在“缓冲”模式下，value 确定主进度条的进度，而缓冲用于显示缓冲进度。

查询

使用进度条的查询模式来指示实际加载开始之前的预加载。

app.component.html

app.component.ts

输出

在“查询”模式下，进度条反转呈现为不确定条。在响应进度可用后，必须确定模式以表达进度。在此模式下，value 属性被忽略。

主题化

使用 color 属性，进度条的颜色将改变。默认情况下，进度条使用主题的主色。它可以更改为强调色或警告色。

可访问性

每个进度条都应该通过 area-label 或 area-labeledby 获得一个有意义的标签。

<Mat-progress-spinner> 和 <mat-spinner> 是活动或进度的圆形指示器。md-progress-circular 和 md-progress-linear 是进度指令，它们在应用程序中显示加载内容消息。

下表显示了 md-progress-circular 的许多属性的参数和描述。

示例 1

该示例显示了 md-progress-circular 指令的用法和圆形进度条的用法。

am_circularprogressbars.htm

输出

示例：2

以下示例显示了线性进度条的用法。

am_linearprogressbars.htm

输出