Индикатор процесса : Progress

Определяет различные стили для индикаторов процесса ^{*progress bars}. Компонент Progress весьма эффективен и прекрасно подходит, чтобы отобразить вашим посетителям какая часть процесса (в процентах или относительных долях) осталась до его завершения.

Применение

Индикатор процесса ^{*Progress Bar} состоит из фонового индикатора и самого индикатора процесса/выполнения, указывающего на увеличение.

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

Пример

44%

Разметка

<div class="uk-progress">
    <div class="uk-progress-bar" style="width: 44%;">44%</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>

Индикатор Progress в полоску

Чтобы создать полосатый индикатор выполнения Striped Progress Bar, используйте класс .uk-progress-striped.

Пример

Разметка

<div class="uk-progress uk-progress-striped">
    ...
</div>

Вы даже можете анимировать полосатый индикатор процесса/выполнения. Для этого просто нужно добавить класс .uk-active.

Пример

Разметка

<div class="uk-progress uk-progress-striped uk-active">
    ...
</div>

Комбинируемый Progress

Все модификаторы компонента Progress могут быть объединены друг с другом.

Пример

Разметка

<div class="uk-progress uk-progress-small uk-progress-warning uk-progress-striped uk-active">
    ...
</div>

Добавляем к проекту компонент «Progress»

<link rel="stylesheet" href="/../css/components/progress.min.css">