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	Колір успішного (success) індикатора.
.-color-warning	Колір попереджувального (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	Малює саме кільце: пончик 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, щоб його можна було анімувати (transition).
--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 — Лінійна стовпчикова форма того ж determinate прогресу.