Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Add a Youtube-like loading bar to all your ajax links
JavaScript CSS
branch: master
Failed to load latest commit information.
README.md Update README.md
demo.html Initial Version
jquery.loadingbar.js Initial Version
jquery.loadingbar.min.js Initial Version
loadingbar.css Initial Version

README.md

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

License: Attribution-ShareAlike 4.0 International

Loading Bar

Demo

View demo

Usage

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.

Further Customization

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="http://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.

Other Resources

  • Tutorial (Coming Soon)
Something went wrong with that request. Please try again.