Make youtube like progress bar easily for your page

What is Youtube Progress Bar

Youtube progress bar is the red colored progress bar that appears on top of a youtube page while loading (Not showing in all browers, try Chrome). Youtube is experimenting with ajax interface to make the site much faster. Due to the new ajax interface, the css and javascript files are not called each time you load a new video. Rather it just changes the URL, load the particular video and its relative HTML asynchronously.

How can you implement the style in your site

Your site may not be similar to youtube which has an ajax interface or need to load only specific element against each click. But still you can implement the style to show the percentage of loaded elements. Here in this article we will see how to make youtube like progress bar for a page and the concept can be implemented to develop other types of loader or progress bar too. We’re ignoring the loading of HTML elements and will progress the loader with respect to the loading of media or rich elements only.

The code and explanation

The CSS file :


#progressBar {
position: fixed;
z-index: 999999;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: #b91f1f;
border-radius: 10%;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progressBar:before {
position: absolute;
content: '';
top: 0;
opacity: 1;
width: 10%;
right: 0px;
height: 2px;
box-shadow: #b91f1f 1px 0 6px 2px;
border-radius: 50%;
}

#progressBar is the loader bar or progress bar here which has a little thick faded part just ahead of it which gives it a cool look. The css is just to design the bar which occupies only 4% of width before the animation starts. And the animations are done by jquery which is there in the main.js file. Place a ‘div’ with id #progressBar right after the starting of the body tag.

main.js file :


$(document).ready(function() {

var lodedSize = 0;
 var number_of_media = $("body img").length;

doProgress();

// function for the progress bar
 function doProgress() {
 $("img").load(function() {
 lodedSize++;
 var newWidthPercentage = (lodedSize / number_of_media) * 100;
 animateLoader(newWidthPercentage + '%');
 })
 }

//Animate the loader
 function animateLoader(newWidth) {
 $("#progressBar").width(newWidth);
 if(lodedSize>=number_of_media){
 setTimeout(function(){
 $("#progressBar").animate({opacity:0});
 },500);
 }
 }

})

First of all we’re checking the number of image files inside the body and initialize the variable ‘number_of_media’. In the doProgress function, you will find that after each image is loaded, the variable ‘loaded’ is incremented by one and the function animateLoader is called with the respective percentage of width. Once the value of ‘loaded’ id equal to ‘number_of_media’, the bar will hide. To provide the animations sufficient time we’ve added the setTimeout. And that’s all to make a simple youtube like progress bar for your image based page.

Implementing with Audio, Video and other media

Not only for image based sites, but for other media web pages also you can create the similar progress bar. The logic is pretty much same. Below, we’re providing the similar piece of js codes and also mentioning the limitations and the way to overcome them.

The simple jquery :


var number_of_media = $("body img").length + $("body audio, body video").length;
 doProgress();

// function for the progress bar
 function doProgress() {
 $("img").load(function() {
 lodedSize++;
 var newWidthPercentage = (lodedSize / number_of_media) * 100;
 animateLoader(newWidthPercentage + '%');
 });
 $('body audio, body video').on('canplaythrough', function() {
 lodedSize++;
 var newWidthPercentage = (lodedSize / number_of_media) * 100;
 animateLoader(newWidthPercentage + '%');
 });
 }

The variable ‘number_of_media ‘ will be initialized with the number of audio video files also. And the on canPlayThrough does the same what ‘load’ does in case of images. But here you can face the below mentioned browser problems.

Problems you may face:

1. Old browsers don’t support audio videos. In that case the canPlayThrough will not work. So the propagation of the progress bar will not work properly.

2. Browsers like opera, and devices like iPhone iPad, doesn’t load audio or video automatically by default. So the canPlayThrough will not work while loading the page.

How to overcome :

1. First using javascript detect if the browser supports audio video or not. If yes, only then add the  $(“body audio, body video”).length; part to the ‘number_of_media’ variable.

2. Put a start button or something before showing the required page, or somehow make the user click atleast once. And by that click load the audio videos, if the browser or device or OS doesn’t support auto loading.

live-demo-button download-button

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Pingback: Top Apprentice Blog Your Best Questions About Jquery Ui | Top Apprentice Blog()

  • Pingback: Article Marketing Income System()

  • Oliver Foxley

    This is great Paul, exactly what I needed. Just a pointer for those who need things spelling out like me – you will also need to put this div markup into your HTML right after the opening body tag to get this working:

    Thanks again, great work!

    • metalshan

      Thanks for the appreciation Oliver. I always try to write my “how to” articles from grassroots level. 🙂

  • misad91

    hey, how to set in wordpress? ty

    • metalshan

      go to your current theme folder, find out index.php or post.php (whatever is the default page name in your theme) there. Open that; and right after the starting of tag add .
      Now open style.css and paste the css codes mentioned in the article to the last of your style.css file. Hopw it will work.

    • misad91

      not work. but u have her a .js how to that inser i WP.

      I hope to be just like this laser line to infiltrate the site

    • metalshan

      Just create a js file and put it somewhere. suppose in (yoursite.com/yourjs/main.js)
      Now link this file from your theme’s index.php.
      Just before the body tag,

      NB: if your theme is not using jQuery, you also have to include that. But normally the modern wp themes uses.

  • I tried adding this and it sort of sticks after the first load. Is there something I should add the might check to see if the images have already loaded?

    • metalshan

      If the images are loaded already, the loader will propagate very fast at the very beginning. Even in the demo I shared it’s working like that. Which browser are you using? Can you please share the code?

  • Mate, this was brilliant.

    • metalshan

      Thank you 🙂

  • john

    check out pace.js

    • metalshan

      Pace is good. But for such a small thing, why to use a library?

    • Libraries are useful for dissecting and learning, but it’s always best to create from scratch for top-notch work.

    • john

      It’s just an alternative. It doesn’t require the bloat JQuery adds for implementation. It’s also easily extendable for customizing themes as well. Great job anyway.

  • metalshan

    Nice to see the implementation. And your site is also cool.
    But I didn’t like your forced load approach. Why to eat up more bandwidth of the client?

    • What do you mean by forced load?

    • metalshan

      I mean, by using this.complete{$(this).trigger(“load”) you want to load the image again?

  • metalshan

    Oh.. calling the load function again? yaa.. but may the animation will be faster and wont be well visible.. stil u can add it ofcourse 🙂

  • Alexander

    Wow! Thank you sir! great tutorial 🙂

  • Halloween81

    what if I want to load a div structure via ajax call?? Can you please guide?

  • anki

    is it possible to add an overlay on the page, while progress bar is running?

    • metalshan

      You can add a overlay div in your page and at the end when you will hide the loader, hide the overlay too.