Я реализовал индикатор выполнения curl, используя
curl_setopt($curl, CURLOPT_PROGRESSFUNCTION, 'callback'); curl_setopt($curl, CURLOPT_BUFFERSIZE,64000); curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true);
и функцию обратного вызова.
проблема в том, что скрипт выводит процент на мой html каждый раз, как это:
0 0.1 0.2 0.2 0.3 0.4 .. .. .. 1 1.1
Как мне совместить это с CSS, чтобы показать изменяющийся индикатор выполнения?
Предположим, что у вас есть индикатор выполнения HTML:
<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%; }
И JavaScript:
var progressElement = document.getElementById('progress') function updateProgress(percentage) { progressElement.style.width = percentage + '%'; progressElement.innerHTML = percentage + '%'; }
Вы можете загрузить его на JavaScript и обновить индикатор выполнения, например:
<script>updateProgress(0);</script> <script>updateProgress(0.1);</script> <script>updateProgress(0.2);</script> .. ..
Обратите внимание: вы не можете поместить каждое обновление в отдельный блок сценария, потому что браузер попытается прочитать полный скрипт перед выполнением, а индикатор выполнения не будет работать.