Lab

Follow experiments on HTML5 and inpirations of different stuff By @moinism

© 2015. All rights reserved.

Create a YouTube-like page load progress plugin in 30 lines of JavaScript

Most of you would have probably seen the very thin, page load progress showing bar on top of websites like YouTube, Medium and many others.

In this post, I'll try to create a plugin to show a loading bar which could be used for anything.

Demo Source

How it works

Its simple. An element in body or anywhere on the page which would have its position to be fixed at top: 0px;. Its width would show the page load progress.

But we'll add the element and set its style with JavaScript once the page has loaded.

Note: Again, I'm not using jQuery here and will using pure JavaScript.

Let's listen to the DOMContentLoaded event to detect when page's DOM has loaded.

document.addEventListener("DOMContentLoaded", function(e) {
    // create a div
    var loadingBar = document.createElement( 'div' );

    // set its id so we could access it later
    loadingBar.id = 'loadingbar';

    // Give it some CSS
    loadingBar.style.cssText = 'position:fixed;top:0;left:0;display:block;height:1px;width:0%;background:#00B8D4;transition:1s width;-webkit-transition:1s width;-moz-transition:1s width;-ms-transition:1s width;z-index:99999';

    // Finally, append it to HTML
    document.body.appendChild( loadingBar );
});

So, here is what we did in the code above:

CSS in clean form

To make it easier for you to understand what we added to the element.

position: fixed;
top: 0px;
left: 0px;

display: block;
height: 1px;
width: 0%;
background: #00B8D4;

/* Bit of animation */
transition: 1s width;
-webkit-transition: 1s width;
-moz-transition: 1s width;
-ms-transition: 1s width;

/* This is supposed to keep it on top of other elements */
z-index: 99999;

Change Progress

Now that our element is in DOM. We can change its width to change the progress.

we can do something like:

loadingBar.style.width = '10%';

Plugin code

Now, here is this code turned into a complete plugin:

var loadingBar = {
        el: null,
        init: function() {
            loadingBar.el = document.createElement( 'div' );
            loadingBar.el.id = 'loadingbar';
            loadingBar.el.style.cssText = 'position:fixed;top:0;left:0;display:block;height:1px;width:60%;background:#00B8D4;transition:1s width;-webkit-transition:1s width;-moz-transition:1s width;-ms-transition:1s width;z-index:99999';
            document.body.appendChild( loadingBar.el );
        },
        setProgress: function( p ) {
            if( p >= 0 && p <= 100 ) {
                loadingBar.el.style.width = p + '%';
                loadingBar.onChange(p);
            }
        },
        // alias of setProgress
        prog: function( p ) {
            loadingBar.setProgress( p )
        },
        inc: function( ) {
            var pNow = loadingBar.el.style.width.slice(0,-1);
            loadingBar.setProgress( ++pNow );
        },
        dec: function( ) {
            var pNow = loadingBar.el.style.width.slice(0,-1);
            loadingBar.setProgress( --pNow );
        },
        color: function( clr ) {
            loadingBar.el.style.background = '#' + clr;
        },
        height: function( h ) {
            loadingBar.el.style.height = h + 'px';
        },
        onChange: function ( val ) {}
    }

Plugin Usage

Just call loadingBar.init(); after DOMContentLoaded.

Methods:

setProgress, prog: Pass an integer between 0 & 100 to set the progress of bar

inc: Increment progress by 1

dec: Decrement progress by 1

color: Pass HEX color code to change the color of bar. Do not pass the #

height: Pass an integer to change height of bar.

Examples:

loadingBar.prog(50); // Bring progress bar at half

loadingBar.color('e1e1e1') // Change the color of bar

Thoughts or Suggestions:

Related Posts