CSS: progress-circle

.instui-progress-circle · stabil — Ein sirkulær framdriftsring styrt av dei tilpassa eigenskapane --value og --value-max.

Ringen er ein conic-gradient‑donut teikna på ::before og klippa med ein radial-gradient‑maske; --value delt på --value-max styrer buen. Legg til -should-animate og last inn interactions entry point for å animere han frå null ved montering. InstUI har ingen indeterminate‑tilstand; :indeterminate er ei pantoken‑spesifikk beste gjetning (native <progress> utan value‑attribut), som roterer ringen i ein fast bue og skjuler .value sidan det ikkje finst eit meiningsfullt tal å vise. <meter> har ingen indeterminate‑tilstand, så den blir ikkje påverka.

Source: progress-circle.css

TIP

JS-forbetring — Denne komponenten sin CSS visast og fungerer av seg sjølv; par den med @pantoken/interactions for å legge til den interaktive åtferda. Modifieren -should-animate vert styrt av den åtferda. Sjå modifikatortabellen nedanfor.

Tilgjenge

Bruk native <progress> for eit nullbasert oppgåvfullføringsområde og <meter> når minimum ikkje er null. Gi anten elementet eit tilgjengeleg namn ved å plassere det inne i <label> eller ved å assosiere ein separat <label> med matchande for- og id-verdiar.

Bruk

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

Døme

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;

Modifikatorar

Modifikator	Skildring
.-color-brand	Farge for merke-målar
.-color-danger	Farge på faremålaren
.-color-info	Farge for informasjonsmålar.
.-color-primary-inverse	On-dark (primær invers) målarfarge.
.-color-success	Farge for suksessmålar.
.-color-warning	Farge på varselmålar.
.-meter-color-alert	Utdatert — use .-color-warning.
.-meter-color-brand	Utdatert — use .-color-brand.
.-meter-color-danger	Utdatert — use .-color-danger.
.-meter-color-info	Utdatert — use .-color-info.
.-meter-color-success	Utdatert — use .-color-success.
.-meter-color-warning	Utdatert — 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	Stor. Langform-alias av -size-lg.
.-size-lg	Stor.
.-size-md	Middels (standard).
.-size-medium	Medium (standard). Langform-aliaset til -size-md.
.-size-sm	Liten.
.-size-small	Liten. Langform-alias av -size-sm.
.-size-x-small	Ekstra liten. Langform-alias av -size-xs.
.-size-xs	Ekstra liten.

Delar

Del	Skildring
.value	Verditeksten midtstilt i ringen sitt hol.

Pseudo-element

Pseudo-element	Skildring
:::indeterminate	Tilpassa, ikkje ein del av InstUI. Gjel berre for eit native <progress>-element utan value-attributt; roterer ::before i ein fast bue og skjuler .value.
::before	Tegnar sjølve ringen: ein konisk-gradient-donut klipt med ein radial maske, der buen følgjer den eigendefinerte eigenskapen --value.

Tilstandar

Tilstand	Skildring
:indeterminate	—

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--animation-delay	<number>	—	Millisekund å vente før mount-animasjonen startar (standard 0).
--max	<number>	—	Maksimal framdriftsverdi (standard 100).
--min	<number>	—	Den minste målarverdien (standard 0).
--pantoken-pc-fill	<color>	—	Fargen på den fylte buen (meter); -color-* modifikatorane set han.
--pantoken-pc-stroke	<length>	—	Ringens strekbreidd; -size-* modifikatorane set den.
--pantoken-pc-track	<color>	—	Fargen på det ikkje utfylte sporet.
--value	<number>	—	Den noverande framdriftsverdien; registrert med @property slik at den kan gå gjennom ein overgang.
--value-max	<number>	—	@alias {@link --max} Den maksimale framdriftsverdien (standard 100).
--value-now	<number>	—	@alias Eit alias for --value.

Animasjonar

Animasjon	Skildring
pantoken-progress-circle-indeterminate	—

Token brukt

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

Nettlesarstøtte

• Registrerer dei numeriske framdrifts-eigenskapane med @property og teiknar med CSS mask og conic-gradient; der overgangar for custom-properties ikkje er støtta, blir ringen framleis rendra, men vil ikkje animere.

Relatert

progress — Den lineære stolpeforma av den same bestemte framdrifta.