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

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

Применение

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

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

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

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

		bar.value += 10;

		if (bar.value >= bar.max) {
			clearInterval(animate);
		}

	}, 1000)
})
</script>

Тест

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

<output id="test-result"></output>

<label>
    <select id="test-select" class="uk-select">
        <option value="0">0</option>
        <option value="25">25 %</option>
        <option value="50">50 %</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>
Progress