推荐：Angular-Loading-Bar - 精美且智能的加载指示器_Javascript

推荐：angular-loading-bar - 精美且智能的加载指示器

angular-loading-bar 是一个轻巧而强大的 angularjs 模块，它能自动添加一个进度条，在任何 xhr 请求发出时显示，以优雅的方式呈现应用的加载状态。尤其在多请求并发时，它将多个请求合并，使加载条的每次更新都与响应进度匹配。该组件仅需简单的配置，即可轻松集成到你的 angular 应用中。

项目介绍

angular-loading-bar 提供了一种无需繁琐设置的方法来处理应用程序的加载指示。只需简单地将其作为依赖注入到你的应用中，引入 css 和 javascript 文件，就可以开始使用了。这个项目支持 angularjs 1.2+ 版本，并且文件大小极小，压缩后仅 2.4kb，gzip 压缩后更是只有 0.5kb。

技术分析

angular-loading-bar 的核心是一个 $http 拦截器和一个服务：

拦截器: 监听所有外发的 xhr 请求，并根据请求的状态管理加载条。
服务: 负责加载条的视觉呈现，包括其插入、宽度调整、完成后的移除等操作。

通过这样的设计，你可以完全专注于你的业务逻辑，而无需手动管理加载条的状态。

应用场景

这款加载条适用于各种需要提示用户等待的情况，比如：

数据从服务器加载时。
大量数据异步操作，如分页加载或表格刷新时。
用户触发耗时的操作，如表单提交或者页面跳转时。

此外，还可以通过配置关闭或替换加载条和图标，满足不同的设计需求。

项目特点

自动化: 自动监听并展示 http 请求的加载进度，无需手动控制。
测试覆盖全面: 拥有完整的单元测试，保证代码质量。
动画兼容: 支持 nganimate，可以添加动画效果。
css 驱动: 允许自定义样式，保持代码分离。
无 jquery 依赖: 纯 angular 实现，减少额外库的引入。

配置选项

包括但不限于以下配置项：

是否显示加载条或旋转图标。
自定义模板。
设置进度条的位置。
修改延迟阈值以控制何时显示加载条。
忽略特定的 xhr 请求。

获取和安装

你可以通过 bower 或 npm 安装，也可以直接从 cdn 引入。以下是基本的安装步骤：

# 使用 bower
$ bower install angular-loading-bar

# 使用 npm
$ npm install angular-loading-bar

或者在 html 中添加引用：

<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.css'>
<script src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.9.0/loading-bar.min.js'></script>

angular-loading-bar 凭借其易用性和灵活性，是优化用户体验的不二之选。现在就尝试一下吧，让您的应用加载指示更加人性化和专业！