CSS: progress-circle

.instui-progress-circle · stable — Een circulair voortgangsrinkje aangedreven door de custom properties --value en --value-max.

De ring is een conic-gradient donut geschilderd op ::before en geclipt met een radial-gradient mask; --value gedeeld door --value-max stuurt de boog aan. Voeg -should-animate toe en laad het interactions entry point om deze vanaf nul bij mount te animeren. InstUI heeft geen indeterminate toestand; :indeterminate is een alleen-pantoken beste gok (native <progress> zonder een value attribuut), roteert de ring met een vaste boog en verbergt .value aangezien er geen zinvol getal is om weer te geven. <meter> heeft geen indeterminate toestand, dus het blijft onaangetast.

Source: progress-circle.css

TIP

JS-verbetering — De CSS van deze component rendert en werkt op zichzelf; combineer met @pantoken/interactions om het interactieve gedrag toe te voegen. De -should-animate modifier wordt door dat gedrag aangestuurd. Zie de modifier table below.

Toegankelijkheid

Gebruik native <progress> voor een nul-gebaseerd taakvoltooiingsbereik en <meter> wanneer het minimum niet-nul is. Geef elk element een toegankelijke naam door het te nestelen in <label> of door een afzonderlijk <label> te associëren via overeenkomende for en id waarden.

Gebruik

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

Voorbeelden

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>

Structuur

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

Modifiers

Modifier	Beschrijving
.-color-brand	Merkkleur voor de meter.
.-color-danger	Gevaar-meterkleur.
.-color-info	Informatieve meterkleur.
.-color-primary-inverse	On-dark (primaire inverse) meterkleur.
.-color-success	Succes-meterkleur.
.-color-warning	Waarschuwing-meterkleur.
.-meter-color-alert	Verouderd — use .-color-warning.
.-meter-color-brand	Verouderd — use .-color-brand.
.-meter-color-danger	Verouderd — use .-color-danger.
.-meter-color-info	Verouderd — use .-color-info.
.-meter-color-success	Verouderd — use .-color-success.
.-meter-color-warning	Verouderd — 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	Groot. Langvormig alias van -size-lg.
.-size-lg	Groot.
.-size-md	Medium (standaard).
.-size-medium	Medium (standaard). Langvormig alias van -size-md.
.-size-sm	Klein.
.-size-small	Klein. Langvormig alias van -size-sm.
.-size-x-small	Extra klein. Langvormig alias van -size-xs.
.-size-xs	Extra klein.

Onderdelen

Onderdeel	Beschrijving
.value	De waardetekst gecentreerd in het gat van de ring.

Pseudo-elementen

Pseudo-element	Beschrijving
:::indeterminate	Aangepast, geen deel van InstUI. Toepasselijk alleen op een native <progress> die zijn value attribuut mist; roteert ::before met een vaste boog en verbergt .value.
::before	Tekent de ring zelf: een conic-gradient donut geclipt met een radiale mask, waarvan de boog de custom property --value volgt.

Staten

Toestand	Beschrijving
:indeterminate	—

Aangepaste eigenschappen

Eigenschap	Type	Standaard	Beschrijving
--animation-delay	<number>	—	Milliseconden om te wachten voordat de mount-animatie start (standaard 0).
--max	<number>	—	De maximale voortgangswaarde (standaard 100).
--min	<number>	—	De minimale meterwaarde (standaard 0).
--pantoken-pc-fill	<color>	—	De kleur van de gevulde boog (meter); de -color-* modifiers stellen deze in.
--pantoken-pc-stroke	<length>	—	De stroke-breedte van de ring; de -size-* modifiers stellen deze in.
--pantoken-pc-track	<color>	—	De kleur van de onvervulde track.
--value	<number>	—	De huidige voortgangswaarde; geregistreerd met @property zodat deze kan overgaan.
--value-max	<number>	—	@alias {@link --max} De maximale voortgangswaarde (standaard 100).
--value-now	<number>	—	@alias Alias voor --value.

Animaties

Animatie	Beschrijving
pantoken-progress-circle-indeterminate	—

Gebruikte tokens

Token	Type	Waarde
--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

Browserondersteuning

• Registreert de numerieke voortgangsproperties met @property en schildert met CSS mask en conic-gradient; waar custom-property-transities niet worden ondersteund, rendert de ring nog steeds maar zal niet animeren.

Gerelateerd

• progress — De lineaire balkvorm van dezelfde determinate voortgang.