进度条可以用来加载页面,拉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
如果你正在寻找一个纯粹的JavaScript进度插件,那么不要再寻找了。使用nanobar.JS,你可以得到一个超小的JS库,它围绕着进度条动画。当gzipped的时候,整个东西测量在字节以下,所以它非常小。你可以在主页上找到一些嵌入在页面中的条形条的例子,以及一个固定在全部浏览器宽度的顶部加载条。它只能运行在一个单一的函数调用上,这使得非js程序员以及坚决反对使用jQuery的开发者来说是完美的。
7.progressStep
大多数进度条都会填满一个百分比或者一个数字计数器。但是进步是不同的。这个jQuery插件可以让用户在预定义的过程中通过不同的步骤来开发一个breadcrumb进度条。这个过程可能是在网站上注册一个新账户,或者跟随电子商务流程。不管怎样,这都是一个很好的插件,可以将这种功能添加到你的网站中。它是完全免费使用和有一些伟大的文档在GitHub回购。
8.CProgress
Cprogress是专门为圆形加载杆设计的。这些绝对不是常态,尤其是在网站上。但是你可以在不刷新页面的情况下为ajax提供动力的widgets提供了便利。它带有一些不同的外观和大量可选的功能,例如自定义速度和数字限制。您需要知道的所有信息都可以在主页或者主要的回购中找到,还有一个下载链接。
9.jQueryCircleProgress
这里有一个非常相似的插件,也建立在jQuery库上。但是使用jQueryCircleProgress插件,你可以获得更多的选择。有更多的自定义主题和更多的选项可供选择。缺点是什么？它可以再重一点,所以它不是每个项目的最佳解决方案。
目前在v1.2.2中,这是一个稳定的插件,值得在生产网站上使用。这取决于你是否需要一个设计成圆圈的进度条！
不管你需要什么,我保证其中的一个插件可以帮助你节省时间和挫败感,避免从头开始编写进度条。