Прогресс

Определяет различные стили для прогресс баров.

Использование

Прогресс бар состоит из фона и бар прогресс бар себя, указывая на рост.

Класс Описание
.uk-progress Этот класс используется в родительском контейнере для создания фона прогресс-бара.
.uk-progress-bar Этот класс должен быть добавлен дочерний элемент, чтобы создать фактическую прогресс бар.

Пример

40%

Разметки

<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>