在前端开发中，loading spinner 和 progress bar 是常见的 UI 组件。它们可以让用户更直观地感受到页面加载或操作的进度，提高用户体验。在 AngularJS 中，实现这两个组件也非常简单，本文将详细介绍其实现方法。
实现 loading spinner
loading spinner 是一个旋转的图标，通常用于表示页面正在加载中。在 AngularJS 中，可以通过 CSS3 动画实现 loading spinner。下面是一段示例代码：
---- ------------------------- ------------------
---- ----------------------
------
-------
------------------ -
--------- ------
---- --
----- --
------ --
------- --
----------------- ------- -- -- -----
-------- -----
-------- -----
---------------- -------
------------ -------
-
-------- -
------ -----
------- -----
-------------- ----
------- --- ----- -----
----------------- --------
---------- ---- -- -------- -------
-
---------- ---- -
---- -
---------- -------------
-
-- -
---------- ---------------
-
-
--------上面的代码中，我们首先定义了一个名为 spinner-container 的容器，用于包裹 spinner。容器使用了 CSS3 的 flex 属性，将 spinner 水平和垂直居中。容器还设置了一个半透明的背景色，以便让 spinner 更加醒目。
接着，我们定义了一个名为 spinner 的 div 元素，用于显示 spinner。spinner 使用了圆形的边框，其中 border-top-color 属性用于设置 spinner 的颜色。spinner 还使用了 animation 属性，指定了一个名为 spin 的动画，用于让 spinner 旋转起来。动画使用了 linear 缓动函数，表示动画速度恒定不变。
最后，我们在 spinner-container 上使用了 ng-show 指令，根据 loading 变量的值来控制 spinner 的显示和隐藏。在控制器中，我们可以通过设置 loading 变量的值为 true 或 false，来控制 spinner 的显示和隐藏。
实现 progress bar
progress bar 是一个进度条，通常用于表示某个操作的进度。在 AngularJS 中，可以通过 Bootstrap 的进度条组件实现 progress bar。下面是一段示例代码：
---- ---------------- ------------------
---- ------------------- -------------------- ------- ------------------ ---------------------------- ----------------- ------------------- ----------------------------
-------------
------
------上面的代码中，我们首先定义了一个名为 progress 的 div 元素，用于显示 progress bar。progress 使用了 Bootstrap 的进度条组件，其中 progress-bar 类用于定义进度条的样式，progress-bar-striped 类用于添加动画效果，active 类用于让进度条持续动画。
在进度条的 style 属性中，我们使用了 width 属性来控制进度条的宽度。进度条的宽度由 progress 变量决定，我们可以在控制器中设置 progress 变量的值为 0 到 100 的整数，来控制进度条的进度。
最后，我们在进度条的内部使用了双大括号语法，将 progress 变量的值显示在进度条上方。
总结
通过上面的介绍，我们可以看到在 AngularJS 中实现 loading spinner 和 progress bar 非常简单。通过使用 CSS3 动画和 Bootstrap 组件，我们可以很容易地实现这两个组件，并提高用户体验。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65fb916ad10417a222725d67