YouTube have recently added a red loading bar at the top of the page to indicate that the next page is loading. You may wonder why they didn’t rely on the browser’s loading bar. That’s because the next page is being loaded with AJAX which doesn’t trigger the normal page load mechanism. That’s why the browser didn’t pick it up. As some of you may know, loading the entire content via AJAX can make your website load faster than the normal way.
That’s because all the static content is left unchanged, and only the dynamic content is being loaded, that way you don’t have to keep asking the server for static content that will never change over and over creating an overload.
[tut demo=”https://onextrapixel.com/examples/youtube-like-ajax-loading-bar/” download=”https://onextrapixel.com/examples/youtube-like-ajax-loading-bar/youtube-like-ajax-loading-bar.zip”]
Create a YouTube-Like Loading Bar for Web
As mentioned in a blog post by Dmitry Fadeyev over at UsabilityPost, many developers are integrating this UI pattern to their websites more and more. Today I decided to build a jQuery plugin that will let you add a loading bar to any AJAX links on your website. Let me show you how it works.
Basic Usage
Loading Bar is a jQuery plugin I built to help you add a loading bar to all your AJAX links with no hassle. The script is basically a wrapper of the jQuery AJAX function with a few twists. To add this to your website, simply include the latest jQuery library together with the jquery.loadingbar.js and loadingbar.css into your document’s <head> and call the function as shown below:
HTML Markup
<a href="<<URL>>" class="ajax-call">..</a> <div id="loadingbar-frame"></div>
For the HTML all we need is the AJAX link and the container that you wish the result to appear in. Make sure to replace the <<URL>> with your AJAX url.
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) {}
});
For the JS part, simply call a .loadingbar on a jQuery selector you wish to initiate the loading bar while retrieving AJAX results. The script will use the href attribute for the AJAX call and it will automatically place the results in the container with the ID loadingbar-frame. Here are the explanations of what these parameters do:
- Target: You can change the container by changing the target parameter of the function call to your preferred selector.
- replaceURL will allow you to visibly change the URL of your browser to the
hrefattribute of the link that was clicked. This is extremely useful when you are using this script for your pagination where you want the URL of your browser to reflect the content displaying. The default value isfalse. - Direction will allow you to control the direction in which the bar will progress. The default value is
“right”which is the same as you see on YouTube.
Everything below “Default Ajax Parameters” is the same as the default jQuery AJAX call. You can override it accordingly. For more info, refer to the jQuery.ajax document available here.
For Further Customization
Sometimes, you may want to have each link perform differently, for example you may want one link to perform a GET request and another to perform a POST request. You can assign each individual link with its own settings by using the available markup as shown below:
HTML Markup
<a href="http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?&tags=everest&tagmode=any&format=json" data-datatype="json" data-type="GET" data-target="#frame">Click Me</a>
You can assign the dataType and type of the AJAX call by simply adding the data-datatype and data-type attributes respectively as shown above. You can also assign a different container by defining your preferred jQuery selector in the data-target attribute.
For the example above, I used the Flickr API which allows me to get pictures tagged “everest” from Flickr. I had also specified that I want the result to be in json format, for which I then set the dataType of the AJAX call to be json, data-type to be GET and assign my own container #frame which will hold all the results returned from the API.
CSS Customization
You can easily change the feel and aesthetic of the bar by using CSS. To change color, go into loadingbar.css and change these values:
#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;
}
[tut demo=”https://onextrapixel.com/examples/youtube-like-ajax-loading-bar/” download=”https://onextrapixel.com/examples/youtube-like-ajax-loading-bar/youtube-like-ajax-loading-bar.zip”]
You’re Done!
And that’s it. You will now have an awesome loading bar for all your AJAX calls. I hope you enjoy this tutorial and my plugin. If you have any questions, feature requests or suggestions, please let me know in the comments below.
