Curl PHP progress bar (percentage of callback return)

Question

I implemented a progress bar curl using

curl_setopt($curl, CURLOPT_PROGRESSFUNCTION, 'callback'); curl_setopt($curl, CURLOPT_BUFFERSIZE,64000); curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true); 

and callback function.

The problem is that the script outputs the percentage to my html every time like this:

 0 0.1 0.2 0.2 0.3 0.4 .. .. .. 1 1.1 

How do I combine this with CSS to display a changing progress bar?

Answer 1

Suppose you have an HTML progress bar:

 <div id="progress-bar"> <div id="progress">0%</div> </div> 

CSS

 #progress-bar { width: 200px; padding: 2px; border: 2px solid #aaa; background: #fff; } #progress { background: #000; color: #fff; overflow: hidden; white-space: nowrap; padding: 5px 0; text-indent: 5px; width: 0%; } 

And JavaScript:

 var progressElement = document.getElementById('progress') function updateProgress(percentage) { progressElement.style.width = percentage + '%'; progressElement.innerHTML = percentage + '%'; } 

You can load it in JavaScript and update the progress bar, for example:

 <script>updateProgress(0);</script> <script>updateProgress(0.1);</script> <script>updateProgress(0.2);</script> .. .. 

Please note that you cannot put each update in a separate script block, because the browser will try to read the full script before execution, and the progress bar will not work.