在前端开发过程中，很多情况下需要对页面的加载过程进行一定的优化，比如添加动画效果来提示用户页面正在加载，尤其是在移动端网络不稳定的情况下，这种加载过程对用户体验的影响更为显著。
ng-load-animation 是一个基于 AngularJS 的加载动画组件，能够方便地为任何 AngularJS 应用添加加载动画效果，支持多种预定样式和自定义样式，而且很容易使用，下面详细介绍如何使用和配置这个 npm 包。
如何安装 ng-load-animation
使用 npm 安装：
npm install ng-load-animation
使用 bower 安装：
bower install ng-load-animation
如何使用 ng-load-animation
首先需要在 HTML 文件中添加加载动画组件的依赖：
<script src="angular.min.js"></script> <script src="ngLoadAnimation.min.js"></script>
接下来，在 AngularJS 模块中添加 ng-load-animation 的依赖：
angular.module('myApp', ['ngLoadAnimation']);在 HTML 中添加加载动画组件：
<div ng-load-animation></div>
这样就可以在页面中添加一个默认的加载动画了。
如何自定义加载动画
ng-load-animation 提供了多种预定样式，可以很方便地配置样式，同时也支持自定义样式，只需要在 CSS 文件中添加相应的样式即可。
为了说明如何自定义样式，这里以一个简单的圆形旋转动画为例：
-- -------------------- ---- ------- ------------------ - -------------- ---- ----------- --- ----- -------- ------------- --- ----- ------------ ------- ----- ------ ----- ------------------ ---- -- ----------- --------- ---------- ---- -- ----------- --------- - ------------------ ---- - -- - ------------------ ------------- - ---- - ------------------ --------------- - - ---------- ---- - -- - ---------- ------------- - ---- - ---------- --------------- - -
自定义样式完毕后，在 HTML 文件中指定样式即可：
<div ng-load-animation="custom"></div>
ng-load-animation 教程总结
ng-load-animation 是一个非常实用的 AngularJS 加载动画组件，通过预定样式和自定义样式，可以很容易地为页面添加动画效果，提高用户体验。同时指定加载组件也是很简单，只需要添加相应的依赖即可。可以完美地与其他 AngularJS 组件和模块集成，成为 AngularJS 开发必备工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8181e8991b448db3db