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 — user_1559454
– user_1559454, Commented Aug 24, 2015 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
– Acha Bill, Commented Aug 24, 2015 at 13:33

Roboroads · Accepted Answer · 2015-08-26 08:15:06Z

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, 2015 at 8:15

answered Aug 24, 2015 at 13:31

Roboroads

1,7571 gold badge15 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Acha Bill Over a year ago

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 Over a year ago

still does not work. Its the style = "width" that is responsible for progress. I see you are updating aria-valuenow instead

Acha Bill Over a year ago

I get error: Uncaught SyntaxError: Unexpected string in this line if(num < 100) $(".progress .progress-bar").css("width", (num+1)."%");

Roboroads Over a year ago

@jafar Corrected that error for you. I did the concatenation per accident the PHP-way.

pcdoc · Accepted Answer · 2015-08-24 13:36:53Z

0

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%

answered Aug 24, 2015 at 13:36

pcdoc

961 silver badge3 bronze badges

Comments

Luka Svalina · Accepted Answer · 2015-08-24 13:38:13Z

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, 2015 at 13:38

Luka Svalina

10812 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:14:37Z

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

Collectives™ on Stack Overflow

PHP Progress Bar on web page

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related