Прогресс
Определяет различные стили для прогресс баров.
Использование
Прогресс бар состоит из фона и бар прогресс бар себя, указывая на рост.
Класс | Описание |
---|---|
.uk-progress |
Этот класс используется в родительском контейнере для создания фона прогресс-бара. |
.uk-progress-bar |
Этот класс должен быть добавлен дочерний элемент, чтобы создать фактическую прогресс бар. |
Пример
Разметки
<div class="uk-progress">
<div class="uk-progress-bar" style="width: 40%;">40%</div>
</div>
Модификаторы размера
Добавить .uk-progress-mini
или .uk-progress-small
класс для изменения размера бара.
Пример
Разметки
<div class="uk-progress uk-progress-mini">...</div>
<div class="uk-progress uk-progress-small">...</div>
Цвет модификаторы
Применять различные цвета на ваш прогресс бары, просто добавьте .uk-progress-success
, .uk-progress-warning
или .uk-progress-danger
класс.
Пример
Разметки
<div class="uk-progress uk-progress-success">...</div>
<div class="uk-progress uk-progress-warning">...</div>
<div class="uk-progress uk-progress-danger">...</div>
Полосатый
Чтобы создать полоску прогресс бара, используйте .uk-progress-striped
класс.
Пример
Разметки
<div class="uk-progress uk-progress-striped">...</div>
Вы можете даже анимировать полосатый бар. Чтобы сделать это, просто добавьте .uk-active
класс.
Пример
Разметки
<div class="uk-progress uk-progress-striped uk-active">...</div>
Комбинируется
Все модификаторы прогресса компонента могут быть объединены друг с другом.
Пример
Разметки
<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>