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

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

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

Полоса прогресса состоит из слоя описывающего длину всего прогресса - 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-1">
  <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>