Building a Progress bar for Loading everything before display

Question

Hello i really try and search before ask.. Im trying to use jquery for a progress bar, i found a lot of info, the problem is most of the examples are just "animations" i mean, they dont really display the %, of the loading process.. and i cant find a way to do it.

Im trying to use this http://www.htmldrive.net/items/show/791/Very-Beautiful-CSS3-And-JQuery-progress-bar

Mixed With the correct answer on this question. how to create a jQuery loading bar? (like the ones used on flash sites)

But i just can´t manage to merge

$.when($.ajax("video1.ogv"))
.then(function () {
    videoLoaded[1] = true;
    updateProgressBar();
});

$.when($.ajax("video2.ogv"))
.then(function () {
    videoLoaded[2] = true;
    updateProgressBar();
});

$.when($.ajax("video3.ogv"))
.then(function () {
    videoLoaded[3] = true;
    updateProgressBar();
});

var updateProgressBar = function() {
    // iterate though the videoLoaded array and find the percentage of completed tasks
    $("#progressbar").progressbar("value", percentage);
}

So the bar on CSS that i show you .. really display the % that has been loading of the content of #main_content or a video like in example..

Hope i make my self clear because my english its very bad.

Answer 1

Why not do something like this? Just change it for AJAX and use success as your trigger. Basically a never ending animated gif while waiting for you data loading.

<div id="chartDiv"></div>

var chartDiv = document.getElementById("chartDiv");
var loadingImg = document.createElement("img");
var newImg = document.createElement("img");

loadingImg.src = "http://i1267.photobucket.com/albums/jj559/rizkytanjo96/loading.gif";
chartDiv.appendChild(loadingImg);

function placeLoaded() {
    chartDiv.removeChild(loadingImg);
    chartDiv.appendChild(newImg);
}

function getNew() {
    newImg.addEventListener("load", placeLoaded, false);
    newImg.src = "http://i1276.photobucket.com/albums/y462/staffpicks/Animated_GIFs/ahhhh.gif";
}

setTimeout(getNew, 10000);

on jsfiddle

Alternatively, if you don't want an animated gif, you could do something like this with javascript.

#pwidget {
    background-color:lightgray;
    width:254px;
    padding:2px;
    -moz-border-radius:3px;
    border-radius:3px;
    text-align:left;
    border:1px solid gray;
}
#progressbar {
    width:250px;
    padding:1px;
    background-color:white;
    border:1px solid black;
    height:28px;
}
#indicator {
    width:0px;
    background-image:url("http://img827.imageshack.us/img827/269/shadedgreen.png");
    height:28px;
    margin:0;
}
#loading {
    text-align:center;
    width:250px;
}

var pwidget = {
    maxprogress: 250,
    actualprogress: 0,
    itv: 0,
    delay: 10,
    prog: function () {
        if (pwidget.actualprogress >= pwidget.maxprogress) {
            clearInterval(pwidget.itv);
            return;
        }

        var indicator = document.getElementById("indicator");

        pwidget.actualprogress += 1;
        indicator.style.width = pwidget.actualprogress + "px";

        if (pwidget.actualprogress === pwidget.maxprogress) {
            pwidget.restart();
        }
    },
    start: function () {
        pwidget.itv = setInterval(pwidget.prog, pwidget.delay);
    },
    stop: function () {
        clearInterval(pwidget.itv);
    },
    restart: function () {
        pwidget.actualprogress = 0;
        pwidget.stop();
        pwidget.start();
    },
    element: function () {
        var pwidget = document.createElement("div"),
            progressbar = document.createElement("div"),
            indicator = document.createElement("div"),
            loading = document.createElement("div");

        pwidget.id = "pwidget";
        progressbar.id = "progressbar";
        indicator.id = "indicator";
        loading.id = "loading";
        loading.textContent = "Loading ...";

        progressbar.appendChild(indicator);
        pwidget.appendChild(progressbar);
        pwidget.appendChild(loading);

        return pwidget;
    }
};

var chartDiv = document.getElementById("chartDiv");
var widget = pwidget.element();
var newImg = document.createElement("img");

function placeLoaded() {
    pwidget.stop();
    chartDiv.removeChild(widget);
    chartDiv.appendChild(newImg);
}

function getNew() {
    newImg.addEventListener("load", placeLoaded, false);
    newImg.src = "http://i1276.photobucket.com/albums/y462/staffpicks/Animated_GIFs/ahhhh.gif";
}

chartDiv.appendChild(widget);
pwidget.start();
setTimeout(getNew, 10000);

on jsfiddle

Or jQueryUI has a progress bar and you could do a similar thing to my example above.

Answer 2

Part of the reason most sites have moved to a loading gif over a percent is because the percent is really unreliable.

You could possibly be in a situation where you are showing the actual progress as an exact percent then something happens causing traffic to slow down and frustrates the user when it take 5s to load 75% and then 10s to load 25%. Tere are plenty of examples but I will stop here.

If it is at all possible I would take a loading approach over a percent don't approach for this reason alone. As long as there is an indication of work being done users are generally happy.

[EDIT] sorry it took me a little bit to get back to this and give you an example. this is really basic and really depends on how you are showing this loading bar as to how you will add it to the page. Focus is on this line

$('<div>').progressbar({ value: false })

hope this helps. The jQuery progress bar does allow for percentage, still i would try to avoid it unless its absolutely required.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-2.0.0.js"></script>
    <script src="Scripts/jquery-ui-1.10.3.js"></script>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script>
        function show_loading()
        {
            $('<div>').dialog
                ({
                    title: 'loading...',
                    modal: true,
                    closeOnEscape: true,
                    draggable: false,
                    resizable: false
                })
            .append($('<div>').progressbar({ value: false }));
        }
    </script>
</head>
<body>
    <button id="show_loading" onclick="show_loading();">show loader</button>
</body>
</html>