在现代 Web 开发中，有许多需要等待异步操作完成的场景，比如数据加载、网络请求等。为了提高用户体验，我们可以使用 Spinner 组件来提示用户等待操作的完成。在本文中，我们将介绍如何在 Angular 中实现 Material Design 风格的 Spinner 组件。
准备工作
在开始之前，我们需要先安装 Angular Material 和 Angular CDK：
--- ------- ------ ----------------- ------------
然后在 app.module.ts 中导入所需的模块：
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------------------ - ---- -------------------------------------
------ - ------------ - ---- ------------------
-----------
------------- ---------------
-------- -
--------------
------------------------
------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- --这里我们导入了 MatProgressSpinnerModule，它是 Angular Material 中的一个模块，包含了实现 Spinner 功能所需的组件和指令。
实现
要在 Angular 中实现 Spinner 组件，我们可以使用 mat-spinner 组件。它是 MatProgressSpinner 组件的别名，可以用来显示一个循环旋转的进度指示器。
基本使用
要使用 mat-spinner，我们只需要在模板中添加以下代码：
---------------------------
这将在页面中显示一个默认样式的 Spinner。
自定义颜色
如果我们想要自定义 Spinner 的颜色，可以使用 color 属性。该属性的值可以是预定义的颜色名称（如 primary、accent、warn），也可以是 CSS 颜色值。
------------ ----------------------------- ------------ ------------------------------
自定义大小
如果我们想要自定义 Spinner 的大小，可以使用 diameter 和 strokeWidth 属性。diameter 属性表示 Spinner 的直径，strokeWidth 属性表示 Spinner 的边框宽度。
------------ ------------- ------------------------------
改变模式
默认情况下，mat-spinner 组件使用 indeterminate 模式，也就是不显示具体的进度值。如果我们想要显示具体的进度值，可以使用 determinate 模式。
------------ ------------------ -------------------------
在 determinate 模式下，我们需要使用 value 属性来指定进度值，值的范围为 0 到 100。
示例代码
下面是一个完整的示例代码，包含了所有上述功能：
--------------------------- ------------ ----------------------------- ------------ ------------------------------ ------------ ------------- ------------------------------ ------------ ------------------ -------------------------
总结
在本文中，我们介绍了如何在 Angular 中实现 Material Design 风格的 Spinner 组件。通过使用 mat-spinner 组件，我们可以轻松地实现各种不同样式和功能的 Spinner。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65cd674aadd4f0e0ff6a2c39