原标题：为Web前端开发人员提供的9个免费进度条JavaScript插件
进度条可以用来加载页面, 拉 Ajax 内容, 或者处理像文件上传这样的基本用户输入任务。新的 HTML5进度条使得在任何页面上添加这些功能变得非常容易。 但是为什么不重新设计一下呢？有了这些免费的插件, 你可以重新设计你的进度条来匹配任何网站的外观。 更不用说你可以添加到页面上的所有额外功能和自定义动画。
1. LineProgressbar
是一个超薄和轻量级的免费插件。它适用于任何现代的进度条元素, 它采取基本选项的总填充长度, 条色, 和高度 / 宽度(除其他功能)。你可以在你自己的网站上使用代码片段来查看一些示例。对于任何愿意使用 jQuery 的人来说, 这可能是最好的进度条插件。 这是一个简单的工作, 它将运行在所有主要的浏览器。
2. MProgress.js
我真正喜欢的另一个简单的选择是 MProgress.js。 这是围绕谷歌的材料设计风格建立起来的, 所以你可能会注意到它非常类似于谷歌的一些加载栏。
它有四种不同类型的加载条和四种不同的动画风格。 它们都显示在主页上, 所以你可以看到哪个可能适合你的网站。
但是你也可以在 GitHub 回购中找到这些演示的 gif 动画, 以及安装说明。超级简单, 超轻量级。 你还能要求什么？
3. ProgressBar.js
我们都看到过横跨网页顶部的进度条。 这些越来越普遍, 它们通常用于动态加载的页面。ProgressBar.js是一个免费的插件, 可以复制这个特性。 但它不仅仅依赖于页面顶部的栏杆。
您可以使用这个插件为任何自定义形状, 从圆圈到三角形和自定义的平行四边形。
如果你查看主页, 你会发现链接到通过 JSFiddle 托管的示例。 这里有很多内容, 这些是在你的页面上添加装载器的绝佳模板。
4. goalProgress
插件绝对是最简单的插件。 它主要用于跟踪输入字段上的数字, 但它可以用于任何类似的进度条。关于 GitHub 回购的更多信息显示了它的功能以及如何安装。我推荐这个更简单的起点, 非常基本的进步动画。 对于其他的插件, 请查看这里的其他插件。
5. μProgress
在为这篇文章做研究之前, 我从来没有听说过μProgress。 然而, 它显然是网络上最好的进度条插件之一。这是一个专注于自定义动画的过时进度条。 它们都运行在计算机的 GPU 上, 这样可以释放其他页面元素的任务以更快的渲染。你可以阅读更多关于这个过程的信息, 并在文档中找到安装细节。 这是一个非常酷的项目, 有一个完整的插件 API 来添加自定义功能。
6. nanobar.js
如果你正在寻找一个纯粹的 Java 进度插件, 那么不要再寻找了。使用 nanobar.JS, 你可以得到一个超小的 JS 库, 它围绕着进度条动画。 当 gzipped 的时候, 整个东西测量在700字节以下, 所以它非常小。你可以在主页上找到一些嵌入在页面中的条形条的例子, 以及一个固定在全部浏览器宽度的顶部加载条。它只能运行在一个单一的函数调用上, 这使得非 js 程序员以及坚决反对使用 jQuery 的开发者来说是完美的。
7. progressStep
大多数进度条都会填满一个百分比或者一个数字计数器。但是进步是不同的。 这个 jQuery 插件可以让用户在预定义的过程中通过不同的步骤来开发一个 breadcrumb 进度条。这个过程可能是在网站上注册一个新账户, 或者跟随电子商务流程。不管怎样, 这都是一个很好的插件, 可以将这种功能添加到你的网站中。 它是完全免费使用和有一些伟大的文档在 GitHub 回购。
8. CProgress
Cprogress 是专门为圆形加载杆设计的。这些绝对不是常态, 尤其是在网站上。 但是你可以在不刷新页面的情况下为 ajax 提供动力的 widgets 提供了便利。它带有一些不同的外观和大量可选的功能, 例如自定义速度和数字限制。 您需要知道的所有信息都可以在主页或者主要的回购中找到, 还有一个下载链接。
9. jQuery Circle Progress
这里有一个非常相似的插件, 也建立在 jQuery 库上。但是使用 jQuery Circle Progress 插件, 你可以获得更多的选择。 有更多的自定义主题和更多的选项可供选择。缺点是什么？ 它可以再重一点, 所以它不是每个项目的最佳解决方案。
目前在 v1.2.2中, 这是一个稳定的插件, 值得在生产网站上使用。 这取决于你是否需要一个设计成圆圈的进度条！
不管你需要什么, 我保证其中的一个插件可以帮助你节省时间和挫败感, 避免从头开始编写进度条。返回搜狐，查看更多
责任编辑：
887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
