CSS: progress-circle

.instui-progress-circle · stable — Кольцевой индикатор прогресса, управляемый пользовательскими свойствами --value и --value-max.

Кольцо — это донат, нарисованный с помощью conic-gradient, залитый на ::before и обрезанный маской radial-gradient; дугу задаёт отношение --value к --value-max. Добавьте -should-animate и загрузите точку входа взаимодействий, чтобы анимировать его от нуля при монтировании. В InstUI нет состояния indeterminate; :indeterminate — это предположение только в pantoken (нативный <progress> без атрибута value), который вращает кольцо с фиксированной дугой и скрывает .value, так как нет осмысленного числа для отображения. <meter> не имеет состояния indeterminate, поэтому на него это не влияет.

Source: progress-circle.css

TIP

Улучшение JS — CSS этого компонента отрисовывает и работает самостоятельно; сопряжение с @pantoken/interactions добавит интерактивное поведение. Его модификатор -should-animate управляется этим поведением. См. таблицу модификаторов ниже.

Доступность

Используйте нативный <progress> для диапазона завершения задач, начинающегося с нуля, и <meter>, когда минимум ненулевой. Дайте любому из элементов доступное имя, вложив его в <label> или связав отдельный <label> через совпадающие значения for и id.

Использование

@import "@pantoken/components/components.css";
@import "@pantoken/components/progress-circle.css";

Примеры

Nested label

<label>
  Uploading Document: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label

<label for="score">Score</label>
<meter id="score" class="instui-progress-circle -color-success" min="20" value="40" max="60">50%</meter>

Структура

// Variant: nested-label

label
  .instui-progress-circle
    .value

// Variant: external-label

label
.instui-progress-circle
  .value

flowchart TD subgraph sg0 ["nested-label"] n1["label"]:::cssdoc-root n2(".instui-progress-circle"):::cssdoc-part n3(".value"):::cssdoc-part end subgraph sg4 ["external-label"] n5["label"]:::cssdoc-root n6[".instui-progress-circle"]:::cssdoc-root n7(".value"):::cssdoc-part end n2 --> n3 n1 --> n2 n6 --> n7 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Модификаторы

Модификатор	Описание
.-color-brand	Цвет индикатора бренда.
.-color-danger	Цвет индикатора опасности.
.-color-info	Информационный цвет индикатора.
.-color-primary-inverse	Цвет индикатора для тёмного фона (primary inverse).
.-color-success	Цвет индикатора успеха.
.-color-warning	Цвет предупреждающего индикатора.
.-meter-color-alert	Устарело — use .-color-warning.
.-meter-color-brand	Устарело — use .-color-brand.
.-meter-color-danger	Устарело — use .-color-danger.
.-meter-color-info	Устарело — use .-color-info.
.-meter-color-success	Устарело — use .-color-success.
.-meter-color-warning	Устарело — use .-color-warning.
.-shold-animate-on-mount	Alias — maps to .-should-animate.
.-should-animate	Interaction — Animate the meter, ring, and centered value into place on mount.
.-should-animate-on-mount	Alias — maps to .-should-animate.
.-size-large	Большой. Длинная форма для -size-lg.
.-size-lg	Большой.
.-size-md	Средний (по умолчанию).
.-size-medium	Средний (по умолчанию). Длинный алиас для -size-md.
.-size-sm	Маленький.
.-size-small	Маленький. Длинная форма для -size-sm.
.-size-x-small	Очень маленький. Длинная форма для -size-xs.
.-size-xs	Очень маленький.

Части

Часть	Описание
.value	Текст значения, выровненный по центру отверстия кольца.

Псевдоэлементы

Псевдоэлемент	Описание
:::indeterminate	Пользовательское (не часть InstUI). Применимо только к нативному <progress>, у которого отсутствует атрибут value; вращает ::before с фиксированной дугой и скрывает .value.
::before	Рисует само кольцо: donut на основе conic-gradient, обрезанный радиальной маской, дуга которого отслеживает пользовательское свойство --value.

Состояния

Состояние	Описание
:indeterminate	—

Пользовательские свойства

Свойство	Тип	По умолчанию	Описание
--animation-delay	<number>	—	Миллисекунды ожидания перед запуском анимации монтирования (по умолчанию 0).
--max	<number>	—	Максимальное значение прогресса (по умолчанию 100).
--min	<number>	—	Минимальное значение индикатора (по умолчанию 0).
--pantoken-pc-fill	<color>	—	Цвет заполненной дуги (индикатора); задаётся модификаторами -color-*.
--pantoken-pc-stroke	<length>	—	Ширина штриха кольца; задаётся модификаторами -size-*.
--pantoken-pc-track	<color>	—	Цвет незаполненного трека.
--value	<number>	—	Текущее значение прогресса; зарегистрировано через @property, поэтому может переходить.
--value-max	<number>	—	@alias {@link --max} Максимальное значение прогресса (по умолчанию 100).
--value-now	<number>	—	@alias Алиас для --value.

Анимации

Анимация	Описание
pantoken-progress-circle-indeterminate	—

Использованные токены

Token	Тип	Значение
--instui-component-progress-circle-color	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-component-progress-circle-color-inverse	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-progress-circle-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-circle-font-weight	<integer>	600
--instui-component-progress-circle-large-size	<length>	9em
--instui-component-progress-circle-large-stroke-width	<length>	0.875em
--instui-component-progress-circle-line-height	<percentage>	125%
--instui-component-progress-circle-medium-size	<length>	7em
--instui-component-progress-circle-medium-stroke-width	<length>	0.625em
--instui-component-progress-circle-meter-color-brand	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-circle-meter-color-brand-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-danger	<color>	#E62429
--instui-component-progress-circle-meter-color-danger-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-info	<color>	#2B7ABC
--instui-component-progress-circle-meter-color-info-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-success	<color>	#03893D
--instui-component-progress-circle-meter-color-success-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-meter-color-warning	<color>	#CF4A00
--instui-component-progress-circle-meter-color-warning-inverse	<color>	LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-circle-small-size	<length>	5em
--instui-component-progress-circle-small-stroke-width	<length>	0.5em
--instui-component-progress-circle-track-color	<color>	LightDarklight-dark(#ffffff, #10141A)
--instui-component-progress-circle-track-color-inverse	<color>	#00000000
--instui-component-progress-circle-x-small-size	<length>	3em
--instui-component-progress-circle-x-small-stroke-width	<length>	0.2em

Поддержка браузеров

• Регистрирует числовые свойства прогресса с @property и рисует с помощью CSS mask и conic-gradient; если переходы пользовательских свойств не поддерживаются, кольцо всё равно отрисуется, но не будет анимироваться.

Связанные

• progress — Линейная полосовая форма того же детерминированного индикатора.