W3.CSS Прогрес-бари
Прогрес-бар (індикатор прогресу) можна використовувати, щоб показати, наскільки далеко користувач перебуває в процесі:
Основний прогрес-бар (індикатор виконання)
Звичайний <div> можна використовувати для індикатора прогресу.
Властивість ширини CSS можна використовувати для встановлення висоти та ширини індикатора виконання.
Приклад
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Ширина прогрес-бару
Змініть ширину індикатора виконання за допомогою властивості CSS width (від 0 до 100%):
Приклад
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Кольори прогрес-бару
Використовуйте класи w3-color, щоб змінити колір індикатора виконання:
Приклад
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Мітки прогрес-бару
Додайте текст у елемент w3-container, щоб додати мітку до панелі виконання.
Використовуйте клас w3-center, щоб центрувати мітку. Якщо пропущено, вона буде вирівняна за лівим краєм.
Приклад
<div class="w3-light-grey">
<div class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Розмір тексту прогрес-бару
Використовуйте класи w3-size, щоб змінити розмір тексту в контейнері:
Приклад
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Внутрішній відступ прогрес-бару
Використовуйте класи w3-padding, щоб додати доповнення (відступ) до контейнера.
Приклад
<div class="w3-light-grey">
<div class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Заокруглені прогрес-бари
Використовуйте класи w3-round, щоб додати закруглені кути до прогрес-бару:
Приклад
<div class="w3-light-grey w3-round">
<div class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Динамічний прогрес-бар
Використовуйте JavaScript, щоб створити динамічний прогрес-бар:
Приклад
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green" style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" onclick="move()">Тицни мене!</button>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
Динамічний прогрес-бар з мітками
Мітка по центру:
Мітка вирівняна по лівому краю:
Мітка за межами прогрес-бару:
Інший приклад (розширений):
