Text Based Progress Bar for PHP or HTML

Question

Hi I am looking for a text based progress bar which displays the progress by running "=====" and giving percentage.

Similar to the progress bar like this http://scott.sherrillmix.com/blog/programmer/progress-bars-in-r/

but should be in php, like below

=============================================99%

THe progress bar should display the progress of page loading when we refresh the page or when we submit by clicking on any button on web page.

Answer 1

I think you must handle this job with jquery and css so you can use for php , html or any webpages you want.

this is my solution DEMO LINK

HTML :

<div id="content">
    <h1>Preloading site</h1>
    <ul>
        <li><img src="images/a.jpg" alt="Flower" /></li>
        .
        .
        .
        <li><img src="images/z.jpg" alt="Flowers" /></li>
    </ul>

</div>

CSS :

body {
    background-color: #000;
    margin: 0px;
    padding: 0px;
    background-image: url(../images/lotus.jpg);
    background-position: 50% 50%;
    background-attachment: fixed;
    font-family: sans-serif;
    font-size: 14px;
}

p {
    line-height: 1.4em;
}

img{
    max-width:100%;
}

body #content {
    width: 800px;
    padding: 20px;
    background-color: rgba(255,255,255,.6);
    margin: 20px auto;
    overflow: hidden;
}

h1{
    font-family: georgia;
    font-style: italic;
    color:maroon;
}

body ul {
    padding: 0px;
    margin: 0px;
}

body ul li {
    display: block;
    list-style-type: none;
    float: left;
    width: 400px;
    height: auto;
    overflow: hidden;
    text-align: center;
}

body ul li.gradient {
    padding: 20px;
    width: 360px;
    height: 227px;

    background: #efc5ca; /* Old browsers */
    background: -moz-linear-gradient(top, #efc5ca 0%, #ef2f43 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efc5ca), color-stop(100%,#ef2f43)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* IE10+ */
    background: linear-gradient(top, #efc5ca 0%,#ef2f43 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#ef2f43',GradientType=0 ); /* IE6-9 */
}
#loaderMask{
    text-align: center;
    padding-top: 20%;
}
#loaderMask span{
    padding: 20px;
    float:left;
    font-size: 12px;
    font-weight:bold;

}

Script :

$(document).ready(function () {
    "use strict"
    //indexOf is not supported by IE9>. 
    if (!Array.prototype.indexOf){
      Array.prototype.indexOf = function(elt /*, from*/){
        var len = this.length >>> 0;

        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
          from += len;

        for (; from < len; from++){
          if (from in this &&
              this[from] === elt)
            return from;
        }
        return -1;
      };
    }

    var bgImg = [], img = [], count=0, percentage = 0;

    //Creating loader overlay
    $('<div id="loaderMask"><span>0%</span></div>').css({
        position:"fixed",
        top:0,
        bottom:0,
        left:0,
        right:0,
        background:'#fff'
    }).appendTo('body');

    //Searching all elemnts in the page for image
    $('*').filter(function() {

        var val = $(this).css('background-image').replace(/url\(/g,'').replace(/\)/,'').replace(/"/g,'');
        var imgVal = $(this).not('script').attr('src');

        if(val !== 'none' && !/linear-gradient/g.test(val) && bgImg.indexOf(val) === -1){
            bgImg.push(val)
        }

        if(imgVal !== undefined && img.indexOf(imgVal) === -1){
            img.push(imgVal)
        }

    });

    var imgArray = bgImg.concat(img); 

    $.each(imgArray, function(i,val){ //Adding load and error event
        $("<img />").attr("src", val).bind("load", function () {
            completeImageLoading();
        });

        $("<img />").attr("src", val).bind("error", function () {
            imgError(this);
        });
    })

    function completeImageLoading(){
        count++;
        percentage = Math.floor(count / imgArray.length * 100);
        $('#loaderMask').html('<span>'+percentage + '%'+'</span>');
        for ( var i = 0; i < percentage; i++ ) {
            $('#loaderMask span').append("=");
            }
        if(percentage === 100){
            $('#loaderMask').html('<span>100%</span>')
            $('#loaderMask').fadeOut(function(){
                $('#loaderMask').remove()
            })
        }
    }

    //Error handling
    function imgError (arg) {
        $('#loaderMask').html("Image failed to load.. Loader quitting..").delay(3000).fadeOut(1000, function(){
            $('#loaderMask').remove();
        })
    }    
});