Индикаторы выполнения W3.CSS
Индикатор выполнения можно использовать, чтобы показать, как далеко пользователь находится в процессе:
Основной индикатор выполнения
Обычный элемент <div> можно использовать для индикатора выполнения.
Свойство ширины CSS можно использовать для установки высоты и ширины индикатора выполнения.
Пример
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Ширина полосы прогресса
Измените ширину индикатора выполнения с помощью свойства ширины CSS (от 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-контейнера , чтобы добавить метку к индикатору выполнения.
Используйте класс 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()">Click Me</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>
Динамический индикатор выполнения с метками
Метка по центру:
Пример
Метка с выравниванием по левому краю:
Пример
Метка за пределами индикатора выполнения:
Пример
20%
Другой пример (расширенный):
Пример
Added 0 of 10 photos