Progress Bar (индикатор выполнения)

Progress Bar — — это компонент, который используется для визуализации прогресса выполнения задачи. Он может отображать прогресс в виде горизонтальной полосы, заполняющейся в зависимости от текущего значения. В данном случае компонент реализован с использованием HTML и CSS, поддерживает различные стили и настройки.

Классы и их назначение

Класс Назначение
.sf-progress-bar-container Основной контейнер для индикатора выполнения.
.sf-progress-bar Индикатор выполнения (полоса прогресса).
.sf-progress-bar--horizontal Модификатор для горизонтального отображения индикатора выполнения.

Переменные CSS и их значения по умолчанию

Переменная Значение по умолчанию Описание
--sf-progress-bar--width var(--sf-f9) Ширина контейнера индикатора выполнения.
--sf-progress-bar--display flex Тип отображения контейнера (по умолчанию flex).
--width 0 Ширина заполнения индикатора выполнения (в процентах).

Пример HTML и CSS

Стандартный progress bar:

                
                        <div class="sf-progress-bar-container">
                            <div class="sf-progress-bar" style="--width: 50">"</div>
                        </div >
50% 
                
                        <div class="sf-progress-bar-container">
                            <div class="sf-progress-bar" style="--width: 50">"</div>
                            <span>50%</span>
                        </div >
50% 
                
                        <div class="sf-progress-bar-container sf-progress-bar--horizontal">
                            <div class="sf-progress-bar" style="--width: 50">"</div>
                            <span>50%</span>
                        </div >

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