Личный кабинет OneBox CRM
Связаться с нами
+38 (067) 328-75-45
+38 (050) 324-46-54
Кабинет клиентаБаза знаний › Просмотр базы знаний

Прогрессбар

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

Данный сниппет поможет визуально отображать пользователю текущее состояние какого-либо действия на странице, например 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>

Пример