页面跳转、接口请求、图片资源加载，用户等的这几秒其实很关键。这段时间如果屏幕上什么都没有，用户第一反应就是是不是卡了，手指一划就走了；反过来，只要有一条进度条在往前跑，哪怕速度一样，等待的体感也会好很多。这就是加载进度条存在的意义。这次整理了 4 款开源免费、可商用的网页加载进度提示库，覆盖顶部细进度条、自动加载监控、极简进度线和转圈动画，几行代码就能给页面加上等待反馈。
四款库分别管什么
NProgress 是顶部一条细长进度条，配一个 CSS 文件，调一下 start 和 done 两个方法就能跑，常用于路由切换和 Ajax 请求，代码量极小。Pace 的亮点是自动监控，页面资源加载进度它自己盯着，不用手写调用逻辑，还自带二十多套主题模板，圆点、雷达、子弹、mac 风格都有，想换风格改个 CSS 就行。Topbar 主打极简，只有 2KB 左右，提供显示、进度、隐藏三个方法，适合只想放一条进度线、不想引依赖的场景。Spin.js 用来做加载转圈，线条数量、半径、速度、颜色都能调，纯 JS 生成，不需要图片。
什么时候用哪款
用法上其实很好分。想给全局的页面切换和请求加统一反馈，用 NProgress，一个地方写好，全站生效，最省心。不想在业务代码里到处插调用、希望它自动感知加载状态，那就上 Pace，尤其适合传统的多页面站点。只是想在某个按钮点击后显示一条顶部进度线，Topbar 最轻，引进来几乎无感。需要的是按钮上的转圈加载图标，或者表单提交时的等待提示，选 Spin.js 更对路。真实项目里这几款也常搭配着用，比如 NProgress 管全局、Spin.js 管按钮局部。
包内容和用法
压缩包里按库名分成了四个目录，每个目录放了压缩版和非压缩版两种文件。NProgress 和 Pace 各自需要一个 CSS 文件配合；Pace 的主题模板单独放在 templates 目录里，想用哪套把扩展名改成 css 引进来就行。Topbar 和 Spin.js 是纯 JS，引一个文件即可。每个目录都附带了说明文档和许可文件，写了基础用法和参数，拿到手照着用就行，不用再去翻文档站。
加载反馈这种东西平时不起眼，但确实是影响留存的一个小细节，做和不做用户心里都有数。尤其是现在大家耐心都有限，等两秒没反应就走人，一条进度条就能把这几秒稳住。这四款库加起来还不到一百 KB，对项目几乎没有负担，属于投入产出比很高的一件事，配一次全站都能受益。全部是 MIT 协议，可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容