5个最佳网页加载进度条javascript插件

本文概述

• 5. Progressbar.js
• 4. Progress.js
• 3. Nanobar
• 2. NProgress
• 1. Pace.js

向用户显示任务的进度很重要, 特别是对于那些需要花费5秒钟以上才能完成的长任务。没有人愿意在执行操作并且没有任何建议的情况下卡在网页中。

以下库将通过几个文件和代码行来帮助你轻松显示任务的进度。其中一些是自动的, 将在执行ajax调用时被触发, 其他一些则需要通过自定义事件手动处理。

5. Progressbar.js

Github |演示版

使用ProgressBar.js, 可以轻松地为Web创建响应式的时尚进度栏。动画甚至在移动设备上也表现良好。它提供了一些内置的形状, 如”直线”, “圆”和”半圆”, 但你也可以使用任何矢量图形编辑器创建自定义形状的进度条。 ProgressBar.js是轻量级的, 已获得MIT许可, 并支持包括IE9 +在内的所有主要浏览器。加载进度不是自动的, 需要使用javascript进行更改。

4. Progress.js

Github |演示版

ProgressJs是一个JavaScript和CSS3库, 可帮助开发人员为页面上的任何对象创建和管理进度条。该插件不是自动的, 因为你需要通过javascript设置进度。

你可以为进度条设计自己的模板, 也可以简单地对其进行自定义。你可以使用ProgressJs向用户显示在页面上加载内容(图像, 视频等)的进度。它可以用于所有元素, 包括文本框, 文本区域甚至整个正文。它重量轻, 易于使用, 可定制, 免费和开源。

3. Nanobar

Github |演示版

Nanobar是一个非常轻量级的进度条。可惜的是加载进度也不是自动的, 但是如果你仅将其与javascript一起使用, 则此插件会派上用场, 因为你需要使用javascript设置进度, 因此可以在触发某些事件时更改它(在文件上传进度为例)。

2. NProgress

Github |演示版

NProgress是进度条。具有逼真的trick流动画, 以说服你的用户正在发生某些事情。设置可能有些棘手。

1. Pace.js

Github |演示版

Pace.js是一个很棒的自动页面加载进度栏。你只需要包括speed.js和你选择的CSS主题(可用的CSS主题超过6个), 即可为页面加载和Ajax导航提供漂亮的进度指示器。该插件可以使用了, 但是你可以根据需要在初始化时更改某些属性。

如果你知道另一个很棒的加载插件, 请在评论框中与我们分享！