ajax请求html页面进度条,jQuery仿Youtube网站ajax加载进度条特效

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

HTML结构

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

..

我们需要添加的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代码一样来定制它们：

data-datatype="json" data-type="GET" data-target="#frame">Click Me

你可以简单的通过添加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;

}