CSS: progress-circle

.instui-progress-circle · stabil — Ein kreisförmiger Fortschrittsring, gesteuert durch die CSS-Custom-Properties --value und --value-max.

Der Ring ist ein conic-gradient-Donut, der auf ::before gemalt und mit einer radial-gradient-Maske beschnitten wird; --value geteilt durch --value-max steuert den Bogen. Füge -should-animate hinzu und lade den Interactions-Einstiegspunkt, um ihn beim Mount von null aus zu animieren. InstUI hat keinen indeterminierten Zustand; :indeterminate ist eine pantoken-interne Annahme (natives <progress> ohne value-Attribut), die den Ring mit einem festen Bogen rotieren lässt und .value versteckt, da es keine sinnvolle Zahl zu zeigen gibt. <meter> hat keinen indeterminierten Zustand und ist daher unbeeinflusst.

Source: progress-circle.css

TIP

JS-Erweiterung — Das CSS dieser Komponente rendert und funktioniert eigenständig; kombiniere es mit @pantoken/interactions, um das interaktive Verhalten hinzuzufügen. Sein -should-animate-Modifikator wird von diesem Verhalten gesteuert. Siehe die Modifikatortabelle unten.

Barrierefreiheit

Verwenden Sie das native <progress> für einen nullbasierten Aufgabenabschlussbereich und <meter>, wenn der Minimalwert ungleich null ist. Geben Sie einem der beiden Elemente einen zugänglichen Namen, indem Sie es in ein <label> verschachteln oder ein separates <label> durch passende for- und id-Werte zuordnen.

Verwendung

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

Beispiele

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>

Struktur

// 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;

Modifikatoren

Modifikator	Beschreibung
.-color-brand	Farbe der Markenanzeige.
.-color-danger	Farbe des Gefahrenmeters.
.-color-info	Farbe der Informationsanzeige.
.-color-primary-inverse	Farbe des Meters auf dunklem Hintergrund (primäres Invers).
.-color-success	Farbe des Erfolgsmessers.
.-color-warning	Farbe der Warnanzeige.
.-meter-color-alert	Veraltet — use .-color-warning.
.-meter-color-brand	Veraltet — use .-color-brand.
.-meter-color-danger	Veraltet — use .-color-danger.
.-meter-color-info	Veraltet — use .-color-info.
.-meter-color-success	Veraltet — use .-color-success.
.-meter-color-warning	Veraltet — 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	Groß. Langform-Alias von -size-lg.
.-size-lg	Groß.
.-size-md	Mittel (Standard).
.-size-medium	Medium (Standard). Langform-Alias von -size-md.
.-size-sm	Klein.
.-size-small	Klein. Langform-Alias von -size-sm.
.-size-x-small	Extra klein. Langform-Alias von -size-xs.
.-size-xs	Extra klein.

Teile

Teil	Beschreibung
.value	Der Werttext, zentriert in der Öffnung des Rings.

Pseudo-Elemente

Pseudo-Element	Beschreibung
:::indeterminate	Benutzerdefiniert, nicht Teil von InstUI. Gilt nur für ein natives <progress>, dem das value-Attribut fehlt; dreht ::before in einem festen Bogen und blendet .value aus.
::before	Zeichnet den Ring selbst: ein als konischer Verlauf gestalteter Donut, der mit einer radialen Maske beschnitten ist und dessen Bogen der Custom‑Property --value folgt.

Zustände

Zustand	Beschreibung
:indeterminate	—

Benutzerdefinierte Eigenschaften

Eigenschaft	Typ	Standard	Beschreibung
--animation-delay	<number>	—	Millisekunden, die gewartet werden, bevor die Mount-Animation beginnt (Standard 0).
--max	<number>	—	Der maximale Fortschrittswert (Standard 100).
--min	<number>	—	Der minimale Meterwert (Standard: 0).
--pantoken-pc-fill	<color>	—	Die Farbe des ausgefüllten Bogens (Messgerät); die -color-* Modifikatoren legen sie fest.
--pantoken-pc-stroke	<length>	—	Die Strichstärke des Rings; die -size-* Modifikatoren legen sie fest.
--pantoken-pc-track	<color>	—	Die Farbe der nicht gefüllten Spur.
--value	<number>	—	Der aktuelle Fortschrittswert; bei @property registriert, damit er übergehen kann.
--value-max	<number>	—	@alias {@link --max} Der maximale Fortschrittswert (Standard 100).
--value-now	<number>	—	@alias Alias für --value.

Animationen

Animation	Beschreibung
pantoken-progress-circle-indeterminate	—

Verbrauchte Tokens

Token	Typ	Wert
--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

Browser-Unterstützung

Registriert die numerischen Progress‑Eigenschaften mit @property und malt mit CSS mask und conic-gradient; wenn Custom‑Property‑Übergänge nicht unterstützt werden, wird der Ring weiterhin gerendert, aber nicht animiert.

Verwandt

progress — Die lineare Balkenform desselben determinierten Fortschritts.