#Loading Bar by Pete R. A little jQuery plugin that will let you add a Youtube-like loading bar to all your ajax links Created by Pete R., Founder of BucketListly
To add a Youtube-like loading bar to your website, simply include the latest jQuery library found here together with jquery.loadingbar.js
and loadingbar.css
into your document's <head>
and simply call the function as shown below:
$(".ajax-call").loadingbar({
replaceURL: false, /* You can visibly change the URL of the browser to reflect the clicked links by toggling this to true. Default is false. May not work in old browsers. */
target: "#loadingbar-frame", /* The container's selector where you want the ajax result to appear. Default is #loadingbar-frame */
direction: "right", /* The direction where the the loading bar will progress. Default is 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) {}
});
Note: For options listed under Default Ajax Parameters, simply refer to jQuery.ajax doc for more info.
For HTML markups, all you need is a link and a container to show the result:
<a href="YOUR-URL" class="ajax-call">..</a>
<div id="loadingbar-frame"></div>
Make sure you change the "YOUR-URL" into the URL you want the script to load.
Sometime you may want each links to have its own ajax command, for example one for POST
and another for GET
. With this script you can do this by simply following markup rules as shown in the example below:
<a href="https://api.dribbble.com/players/jackietrananh/shots?callback=?"
data-datatype="json" data-type="GET" data-target="#frame">Click Me</a>
This example shows how I was able to call the Dribbble's API with a data markup. Simply assign data-target
with a selector to define the target container, data-type
to define the type of ajax call you want and data-datatype
to define the type you want to receive.
Now, each individual links will perform using its own settings.
- Tutorial (Coming Soon)