Компонент Индикатор выполнения 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