Компонент Индикатор выполнения

Индикатор прогресса или процесса (Progress, progress bar) - элемент интерфейса, который визуально отображает процесс работы, ход выполнения текущей задачи.

Progress: Применение

«Progress» - определяет индикатор выполнения, который показывает, как далеко продвигается процесс. Для того чтобы применить компонент «Индикатор процесса», добавьте класс .uk-progress к элементу <progress>.

Есть два атрибута, которые определяют текущее завершение задачи, представленное элементом progress. Атрибут value указывает, какая часть задачи была выполнена, а атрибут max указывает, сколько работы требуется задаче в целом. 

<progress class="uk-progress" value="10" max="50"></progress>
Интервал

Индикатор с фиксированной паузой раз в секунду. 

<label class="uk-form-label" for="js-progressbar">Индикатор выполнения</label>

<progress id="js-progressbar" class="uk-progress" value="10" max="100"></progress>

<script>
	UIkit.util.ready(function () {
		const bar = document.getElementById("js-progressbar");

		let animate = setInterval(() => {
			if (bar.value < bar.max) {
				
				bar.value += 10;
				
			} else {
			    clearInterval(animate);
			}
		}, 1000);
	})
</script>
Выбор

Смена значения индикатора процесса при изменении выбора. 

<progress id="test-progress" class="uk-progress" value="5" max="100"></progress>

<output id="test-result" class="uk-display-block"></output>

<label>
	Выбор значения: 
    <select id="test-select" class="uk-select uk-width-medium">
        <option value="0">0</option>
        <option value="25">25 %</option>
        <option value="50">50 %</option>
        <option value="75">75 %</option>
        <option value="100">100 %</option>
    </select>
</label>

<script>
const testPprogress = document.getElementById('test-progress');
const testResult    = document.getElementById('test-result');
const selectElement = document.getElementById('test-select');

selectElement.addEventListener('change', (event) => {
  testPprogress.value = event.target.value;
  testResult.value    = `Progress: ${event.target.value}`;
});
</script>
Значение

Отображение результата

Выводим прогресс-результат в HTML-элемент <output>. 

<div class="uk-progress-block">
    <progress class="uk-progress" value="45" max="100"></progress>
    <output class="uk-progress-output"></output>
</div>

<style>
    .uk-progress-block {
        position: relative;
    }

    .uk-progress-block > .uk-progress {
        height: 24px;
    }

    .uk-progress-output {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        text-align: center;
        font-size: 12px;
        line-height: 24px;
        color: #fff;
        z-index: 1;
    }
</style>

<script>
    function asUpdateProgressOutputs() {
        const progressBlocks = document.querySelectorAll('.uk-progress-block');

        progressBlocks.forEach(block => {
            const progress = block.querySelector('.uk-progress');
            const output   = block.querySelector('.uk-progress-output');

            if (progress && output) {
                const value   = progress.value;
                const max     = progress.max;
                const percent = Math.round((value / max) * 100);

                output.textContent = `${percent}%`;
                output.style.width = `${percent}%`;
            }
        });
    }

    document.addEventListener('DOMContentLoaded', () => {
        asUpdateProgressOutputs();
    })
</script>