Компонент Индикатор выполнения Progress
Индикатор прогресса или процесса (Progress, progress bar) - элемент интерфейса, который визуально отображает процесс работы, ход выполнения текущей задачи.
Применение
«Progress» - определяет индикатор выполнения, который показывает, как далеко продвигается процесс.
Для того чтобы применить компонент «Индикатор процесса», добавьте класс .uk-progress
к элементу <progress>
.
Есть два атрибута, которые определяют текущее завершение задачи, представленное элементом progress
.
Атрибут value
указывает, какая часть задачи была выполнена,
а атрибут max
указывает, сколько работы требуется задаче в целом.
<progress class="uk-progress" value="0" max="50"></progress>
Тест
-
-
<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>