Отображение прогресса выполняемой задачи (JavaScript)

8:37 12.06.2017
Решил, для примера, написать простой скрипт (JS), который отображал бы текущий процент выполнения, какой то задачи. В моем примере будет просто заполняться полоса до полного, а рядом счетчик процентов, до 100%.

Для данного прогресса, я использовал HTML тег <progress>, чье предназначение отображать завершение выполнения задачи.
В JS использовал функции: setInterval (постоянное выполнение кода) и clearInterval (остановка функции setInterval), а так же другие функции для передачи значений атрибутов в теги.

Переходи к самому коду. Так выглядит HTML код:
<progress max="100" value="0" id="processing"></progress> <span id="percent">0</span>%

И JavaScript (код прокомментировал, для понимания, что к чему):
<script type="text/javascript">
var num = 0;
function timer() {
    if (num < 100) { // Проверяем значение переменной "num" (меньше 100 или нет)
        // Если значение переменной меньше 100, то выполняем код из следующих двух строк:
        num++; // Прибавляем один
        document.getElementById('processing').value = num; // Изменяем значение атрибута "value"
        document.getElementById('percent').innerHTML = num; // Изменяем цифру рядом с процессом
    }
    else {
        // Если значение переменной "num" 100
        // Останавливаем повторное выполнение функции "timer"
        clearInterval(counter); 
    };
};

var counter = setInterval(timer, 100); 
</script>

Цифра 100, написанная в функции setInterval, задает интервал выполнения функции timer в миллисекундах, то есть функция timer будет выполняться 10 раз в секунду. Если есть необходимость увеличить или уменьшить время прогресса, то следует менять именно эту цифру.

Надеюсь мой пост оказался Вам полезен.
Спасибо за внимание.