Make youtube like progress bar easily for your page

author-avatar
Paul Shan Sun Sep 08 2013

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 :

[code language="css"] #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%; } [/code] #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 :

[code language="javascript"] $(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); } } }) [/code] 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 :

[code language="javascript"] 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 + '%'); }); } [/code] 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
youtubeloadercss

Written By

Paul Shan

Collections

  • E

    ES6

  • R

    React JS

  • C

    CSS

    Cascading style sheets only

  • S

    SEO

    Search engine optimization

  • E

    ES7

  • C

    CMS

    wordpress, drupal, jumla, magento and more


Show All

Tags

vue-js
advanced js
youtube
Web development
vue css
social share buttons
real-life-example
react datetime picker
progra
Online
MathJax
jsfiddle
jquery chart library
instant search using vue
handlebars
event loop
Design
console.log
best practices
imorph

Show All