Progress

Progress отображает конечное число внутри диапазона min/max либо неопределённый ход при value=null. Компонент всегда показывает обязательную подпись и текст значения.

Статус: experimental · в системе с 2026-07 · интерактивность: none (нет)

Когда использовать

Операция длится достаточно долго, а её ход можно выразить числом внутри известного диапазона.
Операция уже началась, но измеримый остаток неизвестен — используется value=null.
Пользователю важно видеть не только полосу, но и текстовое объяснение текущего хода.

Не использовать:

Нужно обозначить ещё не готовую геометрию содержимого — используй Skeleton.
Нужно показать статическое значение относительно нормы, а не ход операции — это Meter.
Операция уже завершилась и нужен итоговый результат — используй Status.

Альтернативы:

status — итоговое или качественное состояние без текущего числового хода

Измеримый ход

Стандартный диапазон вычисляет процент из value.

Импорт каталога 42%

<!--
  🟢

  Измеримый пример Progress использует стандартный диапазон 0–100.
  Пустой valueText оставляет компоненту вычисленный процент.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Progress from "$lib/ui/Progress.svelte";
</script>

<Progress label={t("Импорт каталога")} value={42} />

Свой диапазон

Нестандартные min/max сопровождаются пользовательским valueText.

Подготовка отчёта Шаг 3 из 5

<!--
  🟢

  Пример собственного диапазона описывает дискретные этапы операции.
  Пользовательский valueText заменяет процент понятной подписью.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Progress from "$lib/ui/Progress.svelte";
</script>

<Progress
	label={t("Подготовка отчёта")}
	value={3}
	min={1}
	max={5}
	valueText={t("Шаг 3 из 5")}
/>

Неопределённый ход

Явный null убирает aria-valuenow и включает opacity pulse.

Синхронизация источников Выполняется

<!--
  🟢

  Неопределённый пример Progress передаёт явный null вместо фиктивного числа.
  Компонент показывает полноширинное пульсирующее заполнение без aria-valuenow.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Progress from "$lib/ui/Progress.svelte";
</script>

<Progress label={t("Синхронизация источников")} value={null} />