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

В SIMAI Framework с помощью модификаторов можно создать полосу прогресса.

Описание

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

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

Полоса прогресса состоит из слоя описывающего длину всего прогресса - 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-5 m-bottom-3">
	<div class="sf-progress-bar w-1/4 bg-red-6"</div>
</div>
<div class="sf-progress bg-green-5 m-bottom-3">
	<div class="sf-progress-bar w-2/4 bg-green-6"</div>
</div>
<div class="sf-progress bg-theme-1">
	<div class="sf-progress-bar w-3/4"</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>

Адаптивность

Для установки адаптивности полосы прогресса, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью