这是一款十分实用的jQuery仿Youtube网站ajax加载进度条特效插件。该插件能通过ajax调用来完成Loading进度条效果。

HTML结构

使用该进度条插件，首先要在页面中引入jquery和jquery.loadingbar.js以及loadingbar.css。

<a href="<<URL>>" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>

我们需要添加的html元素是一个ajax链接和一个用于显示结果的容器。上面的代码中请将url换成你的AJAX链接。

JAVASCRIPT

通过下面的语句来调用该进度条插件。

$(".ajax-call").loadingbar({
  target: "#loadingbar-frame",
  replaceURL: false,
  direction: "right",
 
  /* Default Ajax Parameters.  */
  async: true, 
  complete: function(xhr, text) {},
  cache: true,
  error: function(xhr, text, e) {},
  global: true,
  headers: {},
  statusCode: {},
  success: function(data, text, xhr) {},
  dataType: "html",
  done: function(data) {}
});

通过jQuery选择器来调用.loadingbar，这样该jQuery选择器选择的元素将成为loading进度条并通过ajax调用执行进度条动画。插件将使用href中的URL来作为AJAX的地址，并自动将结果放入.loadingbar-frame容器中。

下面介绍一些可用参数：

  • Target ：你可以通过改变该参数来改变结果显示容器。
  • replaceURL ：该参数会在链接呗点击时，改变浏览器的地址栏的URL地址。即显示当前URL的地址，默认值为false。
  • animationTime ：该参数用于设置每次执行动画的时间。单位毫秒，默认值为1000。
  • Direction ：该参数用于控制进度条的动画方向。默认值为"right"。
  • 在“Default Ajax Parameters”下面的参数和jQuery ajax参数一致，你可以通过jQuery.ajax document查看它们。

高级定制

有时候你可能希望使用不同的方式来发送AJAX请求，例如一个链接用GET请求，而另一个则用POST请求。你可以像下面的html代码一样来定制它们：

<a href="..." 
data-datatype="json" data-type="GET" data-target="#frame">Click Me</a>

你可以简单的通过添加data-datatype和data-type来定制你想要的AJAX方式。也可以通过data-target实现来指定结果返回容器。

定制CSS样式

你可以是否容易的改变loading进度条的样式。要改变进度条的颜色，在loadingbar.css文件中修改下面代码：

#loadingbar {
    background: YOUR COLOR;
}
 
#loadingbar dd, #loadingbar dt {
  -moz-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -ms-box-shadow: YOUR COLOR 1px 0 6px 1px;
  -webkit-box-shadow: YOUR COLOR 1px 0 6px 1px;
  box-shadow: YOUR COLOR 1px 0 6px 1px;
}