450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

Полоса прогресса

Компоненты

Полоса прогресса

Версия 4.0.1

Полоса прогресса позволяет наглядно показать состояние выполнения операции или загрузки данных.

Структура компонента

Полоса прогресса состоит из слоя описывающего длину всего прогресса - sf-progress и полосы описывающей длину выполненного прогресса sf-progress-bar. Для текущего прогресса используется дополнительный стиль для слоя sf-progress-bar с указанием размера прогресса в процентах.

<div class="sf-progress">
<div class="sf-progress-bar" style="width: 75%"></div>
</div>

Модификаторы

Вы можете использовать модификаторы цвета фона .bg-{цвет} изменения цвета полосы прогресса.

<div class="sf-progress bg-red-50 mb-3">
<div class="sf-progress-bar bg-red" style="width: 25%"></div>
</div>
<div class="sf-progress bg-green-50 mb-3">
<div class="sf-progress-bar bg-green" style="width: 50%"></div>
</div>
<div class="sf-progress bg-theme-50">
<div class="sf-progress-bar" style="width: 75%"></div>
</div>

Анимированная полоса прогресса

Для создания анимированной полосы прогресса укажите для вложенного слоя класс sf-progress-animation.

<div class="sf-progress">
<div class="sf-progress-animation"></div>
</div>

Размещение в карточке

Для создания анимированной полосы прогресса укажите для вложенного слоя класс sf-progress-animation.

Пример работы прогресса в карточке
<div class="sf-progress">
<div class="sf-progress-animation"></div>
</div>