W3.CSS Прогресс-бар / Индикатор выполнения
Индикатор выполнения (прогресс-бар) может использоваться, чтобы показать, насколько далеко пользователь находится в процессе:
Базовый прогресс-бар
Обычный <div> элемент может использоваться для прогресс-бара.
Свойство CSS width можно использовать для установки высоты и ширины прогресс-бара.
Пример
<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-размер чтобы изменить размер текста в контейнере:
Пример
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Отступы (padding) прогресс-бара
Используйте классы w3-padding чтобы добавить отступы (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>
Динамический прогресс-бар с метками
Центрированная метка:
Метка, выровненная по левому краю:
Метка вне прогресс-бара:
Другой пример (продвинутый):
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
