Прогрессбар

Стандартный прогрессбар

Данный сниппет поможет визуально отображать пользователю текущее состояние какого-либо действия на странице, например ajax-запросов, или общий прогресс чего либо.
Конструкция, также как и кнопки, поддерживает классы модификаторы.


<div class="ob-progressbar">
    <span style="width: 20%;"></span>
</div>

Пример

Модификации прогрессбара по цветам

Для изменения цвета прогрессбара можно использовать модификаторы цветов
Это дает нам возможность более гибко контролировать состояния. Например постепенно добавляя класы red > orange > green для одного прогресбара, можно визуально показать количество заполнения информации аккаунта, например.

.red

.orange

.green


<div class="ob-progressbar red">
    <span style="width: 40%;"></span>
</div>

<div class="ob-progressbar orange">
    <span style="width: 60%;"></span>
</div>

<div class="ob-progressbar green">
    <span style="width: 80%;"></span>
</div>

Пример

Анимационный прогрессбар

Для добавления анимации в прогресбар необходимо использовать модификатор

.animate

 <div class="ob-progressbar animate red">
<span style="width: 40%;"></span>
</div>

<div class="ob-progressbar animate orange">
<span style="width: 60%;"></span>
</div>

<div class="ob-progressbar animate green">
<span style="width: 80%;"></span>
</div>

Пример