Шкала прогресса

Шкала делит ход операции на десять участков, по одному на каждые десять процентов. Она наглядна там, где обычная полоса выглядит слишком абстрактно: заполнение профиля, шаги настройки. Если значение меняется плавно, берите индикатор прогресса.

Пример

Разметка

Минимальная разметка — один пустой блок sf-progress-scale с атрибутами; части скрипт компонента достраивает сам: контейнер sf-progress-scale-container с десятью участками sf-progress-scale-block и подпись sf-progress-scale-text с числом процентов.

Значение задаёт data-value от 0 до 100. Участки заполняются с округлением вверх до десятка: 31 % заполняет четыре участка.
Размер задаёт data-size, статус — data-tone. Скрипт ставит по ним классы sf-progress-scale--size-*, sf-progress-scale--<статус> и sf-progress-scale--<десяток> и снимает остальные, поэтому эти классы руками не пишут.
data-show-text="false" скрывает подпись с числом.
Имя шкалы задаёт data-label, текст для экранного диктора вместо числа — data-value-text.

Варианты

Статус

Статус задаёт цвет заполненных участков. data-tone принимает info, success, warning и error; без него или с primary участки остаются цвета по умолчанию.

без data-tone

data-tone="success"

data-tone="warning"

data-tone="error"

data-tone="info"

HTML

<div class="grid grid-col-1 gap-3">
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="70" data-size="1" data-show-text="false" data-label="Без статуса"></div>
    <code class="text-1/2 color-on-surface-variant">без data-tone</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="70" data-size="1" data-tone="success" data-show-text="false" data-label="Статус success"></div>
    <code class="text-1/2 color-on-surface-variant">data-tone="success"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="70" data-size="1" data-tone="warning" data-show-text="false" data-label="Статус warning"></div>
    <code class="text-1/2 color-on-surface-variant">data-tone="warning"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="70" data-size="1" data-tone="error" data-show-text="false" data-label="Статус error"></div>
    <code class="text-1/2 color-on-surface-variant">data-tone="error"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="70" data-size="1" data-show-text="false" data-tone="info" data-label="Статус info"></div>
    <code class="text-1/2 color-on-surface-variant">data-tone="info"</code>
  </div>
</div>

Размер

Пять ступеней data-size — 1/3, 1/2, 1, 2 и 3 — меняют высоту участков и кегль подписи, но не число участков. По умолчанию — 1.

data-size="1/3"

data-size="1/2"

data-size="1"

data-size="2"

data-size="3"

HTML

<div class="grid grid-col-1 gap-3">
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="40" data-size="1/3" data-label="Размер 1/3"></div>
    <code class="text-1/2 color-on-surface-variant">data-size="1/3"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="40" data-size="1/2" data-label="Размер 1/2"></div>
    <code class="text-1/2 color-on-surface-variant">data-size="1/2"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="40" data-size="1" data-label="Размер 1"></div>
    <code class="text-1/2 color-on-surface-variant">data-size="1"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="40" data-size="2" data-label="Размер 2"></div>
    <code class="text-1/2 color-on-surface-variant">data-size="2"</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale" data-value="40" data-size="3" data-label="Размер 3"></div>
    <code class="text-1/2 color-on-surface-variant">data-size="3"</code>
  </div>
</div>

В строке текста

Классы sf-progress-scale--line-1/2, sf-progress-scale--line-1 и sf-progress-scale--line-2 ставят шкалу в строку текста той же ступени: блок получает высоту строки, а подпись встаёт справа от участков. Так шкала помещается в строку таблицы или списка, не меняя её высоты.

sf-progress-scale--line-1/2

sf-progress-scale--line-1

sf-progress-scale--line-2

HTML

<div class="grid grid-col-1 gap-3">
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale sf-progress-scale--line-1/2" data-value="50" data-size="1" data-label="В строке 1/2"></div>
    <code class="text-1/2 color-on-surface-variant">sf-progress-scale--line-1/2</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale sf-progress-scale--line-1" data-value="50" data-size="1" data-label="В строке 1"></div>
    <code class="text-1/2 color-on-surface-variant">sf-progress-scale--line-1</code>
  </div>
  <div class="flex flex-col gap-1">
    <div class="sf-progress-scale sf-progress-scale--line-2" data-value="50" data-size="1" data-label="В строке 2"></div>
    <code class="text-1/2 color-on-surface-variant">sf-progress-scale--line-2</code>
  </div>
</div>

Доступность

Скрипт ставит на блок role="progressbar", aria-valuemin="0", aria-valuemax="100" и aria-valuenow, а контейнер участков скрывает через aria-hidden="true".
Имя задайте через data-label или aria-labelledby на видимую подпись: без него экранный диктор объявит только число.
Когда процент мало что говорит («3 шага из 10»), задайте data-value-text — он становится aria-valuetext.

JavaScript

Скрипт компонента находит блоки .sf-progress-scale при загрузке страницы и в добавленной позже разметке. Чтобы изменить уже нарисованную шкалу, вызовите SF.ProgressScale.setState(element, state): поля value, size, status, showText, label и valueText меняют то же, что и атрибуты. SF.ProgressScale.getState(element) возвращает текущие значения.

HTML

<div class="flex flex-col gap-2" data-scale-demo>
  <div class="sf-progress-scale" data-value="30" data-size="1" data-label="Заполнение профиля"></div>
  <div class="flex flex-wrap gap-1">
    <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1/2" data-scale-step="-10"><span class="sf-button-text-container">−10%</span></button>
    <button type="button" class="sf-button sf-button--outline sf-button--on-surface sf-button--size-1/2" data-scale-step="10"><span class="sf-button-text-container">+10%</span></button>
  </div>
</div>

JavaScript

document.querySelectorAll('[data-scale-demo]').forEach((demo) => {
  const scale = demo.querySelector('.sf-progress-scale');

  demo.addEventListener('click', (event) => {
    const button = event.target.closest('[data-scale-step]');
    if (!button || !window.SF?.ProgressScale) return;

    const {value} = SF.ProgressScale.getState(scale);
    const next = Math.min(100, Math.max(0, value + Number(button.dataset.scaleStep)));
    SF.ProgressScale.setState(scale, {value: next, status: next === 100 ? 'success' : 'primary'});
  });
});

JavaScript

const scale = document.querySelector('#profile-progress');
SF.ProgressScale.setState(scale, {value: 80});

Компонент регистрирует класс ProgressScale. SF.Loader появляется к событию sf-loader-init на window; SF.Loader.ready('ProgressScale', callback) передаёт класс, когда он зарегистрирован.

JavaScript

const whenLoader = (run) => (window.SF?.Loader ? run() : window.addEventListener('sf-loader-init', run, {once: true}));

whenLoader(() => SF.Loader.ready('ProgressScale', (ProgressScale) => {
  const scale = new ProgressScale({param: {value: 30, size: '1', label: 'Заполнение профиля'}});
  document.querySelector('#profile').append(scale.render());
}));

Параметры: value, size, status, showText, label, valueText. Событий компонент не отправляет.

Классы

Что	Классы
Блок	`sf-progress-scale`
Части	`sf-progress-scale-block`, `sf-progress-scale-container`, `sf-progress-scale-text`
Модификаторы	`sf-progress-scale--10`, `sf-progress-scale--100`, `sf-progress-scale--20`, `sf-progress-scale--30`, `sf-progress-scale--40`, `sf-progress-scale--50`, `sf-progress-scale--60`, `sf-progress-scale--70`, `sf-progress-scale--80`, `sf-progress-scale--90`, `sf-progress-scale--error`, `sf-progress-scale--info`, `sf-progress-scale--line-1`, `sf-progress-scale--line-1/2`, `sf-progress-scale--line-2`, `sf-progress-scale--success`, `sf-progress-scale--warning`
Размеры	`sf-progress-scale--size-1`, `sf-progress-scale--size-1/2`, `sf-progress-scale--size-1/3`, `sf-progress-scale--size-2`, `sf-progress-scale--size-3`

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Переменные

Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид Smart-компонента — его шаблон (см. Переменные компонента). Значение по умолчанию — из базового правила блока (.sf-progress-scale); переменную без него задают только модификаторы.

Переменная	По умолчанию	Задаёт
`--sf-progress-scale--font-size`	не задана; задают модификаторы, например `.sf-progress-scale--size-1/3`: `var(--sf-text-size-1/4)`	`font-size`
`--sf-progress-scale--gap`	не задана; задают модификаторы, например `.sf-progress-scale--size-1/3`: `var(--sf-space-1/4)`	`gap`
`--sf-progress-scale--line-height`	не задана; задают модификаторы, например `.sf-progress-scale--size-1/3`: `var(--sf-text-height-1/4)`	`line-height`
`--sf-progress-scale-container--height`	не задана; задают модификаторы, например `.sf-progress-scale--size-1/3 .sf-progress-scale-container`: `var(--sf-text-size-1/7)`	`height`
`--sf-progress-scale-fill-color`	`var(--sf-primary)`	`background-color`

Навигация

Главное

Документация

Содержание

Шкала прогресса

Пример

Разметка

Варианты

Статус

Размер

В строке текста

Доступность

JavaScript

Классы

Переменные

См. также

Настройки

Шкала прогресса

Пример

Разметка

Варианты

Статус

Размер

В строке текста

Доступность

JavaScript

Классы

Переменные

См. также

Поиск по документации