Бары Прогресс
Индикатор хода выполнения может быть использован, чтобы показать, как далеко пользователь находится в процессе:
Базовый индикатор прогресса
Класс w3-Прогресс-контейнера определяет контейнер для индикатора выполнения, а w3-ProgressBar определяет фактический прогресс бар ( "заполненный" область). Установите ширину строки прогресса со свойством ширина CSS:
пример
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Progress Bar Размеры
Установите ширину / размер индикатора выполнения с процентного значения от 0 до 100%:
пример
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Прогресс бар Цвета
По умолчанию цвет W3-прогресс-контейнера является светло-серый и w3-ProgressBar серый:
Изменить их цвет с любым из W3.CSS цветовых классов:
пример
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>Округлые Барс Прогресс
Используйте любой из w3-круглых классов , чтобы добавить закругленные углы , чтобы ваш прогресс баров:
пример
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Прогресс бар Этикетки
Добавить новый элемент внутри "W3-ProgressBar", чтобы добавить ярлык на панель прогресса.
Совет: Используйте класс W3-центр , чтобы всегда держать этикетку с центром. Если этот параметр опущен, то он будет выравнивание по левому краю.
пример
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>Динамический индикатор прогресса
создать динамический индикатор Использовать JavaScript:
пример
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" 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>Динамический Бар Прогресс Этикетки
Сосредоточенный этикетки:
Выравнивание по левому краю этикетки:
Добавьте вне индикатора выполнения: