CSS: progress-circle

.instui-progress-circle · stable — Une anneau de progression circulaire piloté par les propriétés personnalisées --value et --value-max.

The ring is a conic-gradient donut painted on ::before and clipped with a radial-gradient mask; --value divided by --value-max drives the arc. Add -should-animate and load the interactions entry point to animate it from zero on mount. InstUI has no indeterminate state; :indeterminate is a pantoken-only best guess (native <progress> without a value attribute), spinning the ring at a fixed arc and hiding .value since there's no meaningful number to show. <meter> has no indeterminate state, so it's unaffected.

Source: progress-circle.css

TIP

Amélioration JS — Le CSS de ce composant s'affiche et fonctionne de façon autonome ; associez-le à @pantoken/interactions pour ajouter le comportement interactif. Son modificateur -should-animate est contrôlé par ce comportement. Voir la table des modificateurs ci‑dessous.

Accessibilité

Use native <progress> for a zero-based task completion range and <meter> when the minimum is non-zero. Give either element an accessible name by nesting it in <label> or associating a separate <label> through matching for and id values.

Utilisation

css

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

Exemples

Nested label

html

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

External label

html

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

Structure

// Variant: nested-label

text

label
  .instui-progress-circle
    .value

// Variant: external-label

text

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;

Modificateurs

Modificateur	Description
`.-color-brand`	Couleur du repère de marque.
`.-color-danger`	Couleur du repère de danger.
`.-color-info`	Couleur du repère d'information.
`.-color-primary-inverse`	Couleur du repère pour fonds sombres (inverse principal).
`.-color-success`	Couleur du repère de succès.
`.-color-warning`	Couleur du repère d'avertissement.
`.-meter-color-alert`	Obsolète — use `.-color-warning`.
`.-meter-color-brand`	Obsolète — use `.-color-brand`.
`.-meter-color-danger`	Obsolète — use `.-color-danger`.
`.-meter-color-info`	Obsolète — use `.-color-info`.
`.-meter-color-success`	Obsolète — use `.-color-success`.
`.-meter-color-warning`	Obsolète — 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`	Grand. Alias longue forme de `-size-lg`.
`.-size-lg`	Grand.
`.-size-md`	Moyen (par défaut).
`.-size-medium`	Moyen (par défaut). Alias longue forme de `-size-md`.
`.-size-sm`	Petit.
`.-size-small`	Petit. Alias longue forme de `-size-sm`.
`.-size-x-small`	Extra petit. Alias longue forme de `-size-xs`.
`.-size-xs`	Extra petit.

Parties

Partie	Description
`.value`	Le texte de la valeur centré dans le trou de l'anneau.

Pseudo-éléments

Pseudo-élément	Description
`:::indeterminate`	Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; spins `::before` at a fixed arc and hides `.value`.
`::before`	Dessine l'anneau lui‑même : un donut en conic‑gradient masqué radialement, dont l'arc suit la propriété personnalisée `--value`.

États

État	Description
`:indeterminate`	—

Propriétés personnalisées

Propriété	Type	Défaut	Description
`--animation-delay`	`<number>`	—	Millisecondes à attendre avant de démarrer l'animation d'apparition (par défaut `0`).
`--max`	`<number>`	—	La valeur maximale de progression (par défaut `100`).
`--min`	`<number>`	—	La valeur minimale du repère (par défaut `0`).
`--pantoken-pc-fill`	`<color>`	—	La couleur de l'arc rempli (repère) ; les modificateurs -color-* la définissent.
`--pantoken-pc-stroke`	`<length>`	—	L'épaisseur du trait de l'anneau ; les modificateurs -size-* la définissent.
`--pantoken-pc-track`	`<color>`	—	La couleur de la piste non remplie.
`--value`	`<number>`	—	La valeur de progression actuelle ; enregistrée avec @property afin de pouvoir transiter.
`--value-max`	`<number>`	—	@alias {@link --max} La valeur maximale de progression (par défaut `100`).
`--value-now`	`<number>`	—	@alias Alias pour `--value`.

Animations

Animation	Description
`pantoken-progress-circle-indeterminate`	—

Jetons consommés

Token	Type	Valeur
`--instui-component-progress-circle-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-progress-circle-color-inverse`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-progress-circle-meter-color-brand-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-danger`	`<color>`	`#E62429`
`--instui-component-progress-circle-meter-color-danger-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-info`	`<color>`	`#2B7ABC`
`--instui-component-progress-circle-meter-color-info-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-success`	`<color>`	`#03893D`
`--instui-component-progress-circle-meter-color-success-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-warning`	`<color>`	`#CF4A00`
`--instui-component-progress-circle-meter-color-warning-inverse`	`<color>`	LightDark`light-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>`	LightDark`light-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`

Prise en charge des navigateurs

Enregistre les propriétés numériques de progression avec @property et peint avec les CSS mask et conic-gradient ; lorsque les transitions de propriétés personnalisées ne sont pas prises en charge, l'anneau s'affiche toujours mais n'animera pas.

Liés

progress — The linear bar form of the same determinate progress.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Accessibilité ​

Utilisation ​

Exemples ​

Nested label ​

External label ​

Structure ​

Modificateurs ​

Parties ​

Pseudo-éléments ​

États ​

Propriétés personnalisées ​

Animations ​

Jetons consommés ​

Prise en charge des navigateurs ​

Liés ​