PHP Progress Bar on web page

Question

I have this segment in my php script that shows a progress bar.

<?php
    echo '
    <div class="progress progress-xlarge progress-striped active">
        <div id="progress_bar" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
    </div>
    ';
?>

The width: 90% determines the level of the progress bar.

I want a way to make the progress bar run from 0 to 100 without reloading the page for each iteration. My general ideas is something like.

for($i = 0; $i <= 100; $i++)
    echo '... style="width: $i"...

I know that this will echo a new progress bar for every iteration. It's just a ways to explain what i want. Hope you understand.

I've seen things concerning this like jQuery and Ajax but I can't understand them.

This is the first of this kind of programs i'm writing.

Ive succeeded to make the progress bar move with this script but it runs to fast.

    <script>
$(document).ready(function(){
    for(var i = 0; i < 100; i++)
    {
        $("#progress_bar").attr("style", "width: " + i + "%");
        //setTimeout(function() {}, 2000);   this time out does not work
        //if(i == 99) i = 0; i want the progress bar to start back when complete, 
        //instead the page gets in an infinite loop.

    }
});
</script>

Help with the new changes.

If you want to update the progressbar, you either have to reload the page, or use something like ajax. There is no other way — Michael B, Aug 24 '15 at 13:31
I said "I've seen things concerning this like jQuery and Ajax but I can't understand them." If you could show me a simple way to do it with which ever framework. — Acha Bill, Aug 24 '15 at 13:33

Roboroads · Answer 1 · 2015-08-26T08:15:06.657

3

I'm sorry to bring this to you, but PHP can't change what's getting send to the browser. Once it's in the browser, PHP can't change it anymore. PHP does it's things on the server, before the browser receives it.

You have to use Javascript (jQuery) to change the content of your website when PHP is done sending it. There is no other way.

Also, the progress of PHP isn't logged, so the loading of a page cannot be in a progress bar, unless you want to fake it.

A simple way to fake it (using jquery):

<div class="progress progress-xlarge progress-striped active">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div>
<script>
    var t = setInterval(function(){
        var num = parseInt($(".progress .progress-bar").css("width"));
        if(num < 100) $(".progress .progress-bar").css("width", (num+1)+"%");
        else clearInterval(t);
    }, 250);
</script>

caution: i said simple way, not the most efficient way.

edited Aug 26 '15 at 08:15

answered Aug 24 '15 at 13:31

Roboroads

1,602
1
13
24

I said "I've seen things concerning this like jQuery and Ajax but I can't understand them." If you could show me a simple way to do it with which ever framework – Acha Bill Aug 24 '15 at 13:34
still does not work. Its the `style = "width"` that is responsible for progress. I see you are updating `aria-valuenow` instead – Acha Bill Aug 24 '15 at 14:05
I get error: `Uncaught SyntaxError: Unexpected string` in this line `if(num < 100) $(".progress .progress-bar").css("width", (num+1)."%");` – Acha Bill Aug 25 '15 at 16:01
@jafar Corrected that error for you. I did the concatenation per accident the PHP-way. – Roboroads Aug 26 '15 at 08:15

score 0 · Answer 2 · answered Aug 24 '15 at 13:36

Just for the record: As already mentioned this can't be done in plain PHP, but your methodology would be: Render the HTML oputput, when done Instantiate a call to your backend with JavaScript (i.e. jQuery) once this returns Update the % width of your element with Javascript. Once you reach 100%... Problem: You would need 100 callbacks... so ... you can either fake it... or increment depending on your backend job in higher percentages that - at the end - reflect your 100%

score 0 · Answer 3 · answered Aug 24 '15 at 13:38

0

Try looking at this:https://jqueryui.com/progressbar/#label this is fake loading bar beacuse PHP cant send status of progress and it's all displayed on the client side (in the browser)

answered Aug 24 '15 at 13:38

Luka Svalina

108
12

score 0 · Answer 4 · edited May 23 '17 at 12:14

This example does not use AJAX, so it is a faked progress bar, but just to demo one method by which you could include the javascript:

<?php
    $out = '
        <div class="progress progress-xlarge progress-striped active">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
        </div>
        <script>
            <!-- This (next) line might not be necessary if you are loading it elsewhere -->
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
            $(function(){
                for($i = 0; $i <= 100; $i++){
                    setTimeout(function(){
                        $(".progress-bar").attr("aria-valuenow",$i);
                    },300);
                    //300ms delay between increments
                }
            });
        </script>
    ';
    echo $out;
?>

For more information about AJAX, see this post:

AJAX request callback using jQuery

PHP Progress Bar on web page

4 Answers4