Перейти к содержимому

CoreProgress

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

Показывает, сколько работы сделано и сколько осталось: загрузка файла, шаги формы, обработка данных. Любой процесс дольше мгновения — интерфейс без обратной связи выглядит «зависшим». Точный процент неизвестен? Есть indeterminate-режим: полоса бегает по треку, показывая «работаю» без вранья о процентах.

Согласованность гарантирована: value клампится в 0–100, и заливка, aria-valuenow и числовой показатель (showValue — только в детерминированном режиме) всегда показывают одно и то же. Для скринридеров — role="progressbar" с именем: без потребительского label подставляется локализованное «Загрузка» (coreProgress.loading) — безымянный бар в ассистивных технологиях невидим. В indeterminate aria-valuenow опускается — AT сами объявляют прогресс как неопределённый.

Внешний вид собирается из независимых режимов: flow — переливающийся градиент на заливке (--progress-flow-a/-b, полная замена — --progress-flow-image), striped — диагональные полосы, stripedAnimated — полосы движутся (неявно включает полосы); всё совмещается между собой и с indeterminate. Reduced motion гасит все анимации разом.

Значения и indeterminate
90%
showValue — процент справа от трека
42%
7%
100%
flow — градиентная заливка (пара --progress-flow-a/-b или --progress-flow-image)
flow + indeterminate — нестандартные градиенты (бегущая полоса переливается)
Полосы — striped / striped-animated (можно с flow)