网站建设可以使用的9免费进度栏JavaScript插件

进度条可用于加载页面，拉取Ajax内容或处理基本的用户输入任务，如文件上传。

较新的HTML5进度条使得将这些功能添加到任何页面变得非常容易。但为什么不重新调整它们呢？

有了这些免费插件，您可以重新设计您的进度条，以匹配任何网站的外观。更不用说可以添加到页面的所有额外功能和自定义动画了。

1. LineProgressbar

jQuery LineProgressbar是一个超薄且轻量级的免费插件。

它适用于任何现代化的进度条元素，它需要基本的选项来填充总长度，条形颜色和高度/宽度（以及其他特征）。

查看演示页面中的一些示例以及您可以在自己的网站上使用的代码片段。

这可能是任何愿意使用jQuery的人的最佳进度条插件。与它合作很简单，它可以在所有主流浏览器中运行。

2. MProgress.js

另一个我很喜欢的简单选项是MProgress.js。这是围绕Google的材料设计风格构建的，因此您可能会注意到它与Google的一些加载栏非常相似。

它带有四种不同类型的加载栏，有四种不同的动画风格。它们都显示在主页上，因此您可以看到哪一个适合您的网站。

但您还可以在GitHub回购中找到这些演示的动画GIF 以及设置说明。

超级简单，超级轻便。你还能要求什么呢？

3. ProgressBar.js

我们都看到了横跨网页顶部的进度条。这些变得越来越普遍，它们通常用于动态加载的页面。

ProgressBar.js是一个可以复制此功能的免费插件。但它不仅仅依靠页面顶部的小节。

您可以将此插件用于从圆形到三角形以及自定义平行四边形的任何自定义形状。

如果您查看主页，您会发现指向通过JSFiddle托管的示例的链接。有很多事情要做，这些都是在您的页面上添加装载器的绝佳模板。

4. goalProgress

该goalProgress插件绝对是最简单的一群。它主要用于跟踪输入字段上的数字，但它可以用于任何类似的进度条。

除了慈善捐款栏的基本演示外，您不会在主页上找到太多内容。

关于GitHub仓库的更多信息显示了它的功能以及如何设置它。

我建议这更多作为非常基本的进度动画的一个简单的起点。对于其他任何东西请查看这里的其他插件。

5.μProgress

在研究本文之前，我从未听说过μProgress。但它显然是网络上最好的进度栏插件之一。

这是作为一个专注于定制动画的高性能进度条开发的。它们都运行在计算机的GPU上，可以释放其他页面元素的渲染速度。

您可以阅读更多关于此过程的信息，并在文档中查找设置详细信息。这是一个非常酷的项目，它还具有用于添加自定义功能的完整插件API。

现在它已经在1.0.1版本中，并可能在未来几年保持最新。如果您想尝试一下，请访问主库并下载副本。

6. nanobar.js

如果你正在寻找一个纯粹的香草JavaScript进度插件，那就不要再看。

通过nanobar.js，您可以获得一个以进度条动画为中心的超小型JS库。gzip时，整个事情的测量小于700 字节，所以它非常小。

查看主页中的一些示例，其中嵌入了条形图的条形图以及固定为完整浏览器宽度的顶部加载条。

它可以运行在一个单一的函数调用上，这使得这非常适合非JS编码器以及坚决反对使用jQuery的开发人员。

7. progressStep

大多数进度条填满一个百分比或一个数字计数器。

但progressStep是不同的。这个jQuery插件可以让你开发一个面包屑进度条，用户可以在预定义的过程中通过不同的步骤工作。

此过程可能会注册一个网站上的新帐户，或者遵循电子商务结帐流程。

无论哪种方式，这是一个很棒的插件，可以将这种功能添加到您的网站中。它完全免费使用，并且在GitHub仓库中有一些很棒的文档。

8. CProgress

CProgress专为循环加载栏设计。

这绝对不是常态，特别是在网站上。但是您可以在Ajax驱动的小部件中找到它们，这些小部件可以在不刷新页面的情况下将新元素加载到DOM中。

它带有几个不同的外观和大量的可选功能，如自定义速度和数字限制。您需要了解的所有内容都可以在主页面或主要的回购站点上找到，并附有下载链接。

9. jQuery Circle Progress

这是一个非常类似的插件，也构建在jQuery库上。