CSS: progress-circle

.instui-progress-circle · stable — Pyöreä etenemisympyrä, jota ohjaavat --value ja --value-max -omaiset mukautetut ominaisuudet.

Ympyrä on conic-gradient-donitsi, joka maalataan ::before:llä ja leikataan radiaaligradientti-maskilla; kaarta ohjaa --value jaettuna --value-max:lla. Lisää -should-animate ja lataa interactions-entry-point animaatiota varten, joka käynnistyy nollasta mountissa. InstUI:lla ei ole epämääräistä (indeterminate) tilaa; :indeterminate on pantokenin paras arvaus (natiivinen <progress> ilman value-attribuuttia), pyörittäen rengasta kiinteällä kaarella ja piilottaen .value, koska merkityksellistä lukuarvoa ei ole näytettäväksi. <meter>:lla ei ole epämääräistä tilaa, joten se ei muutu.

Source: progress-circle.css

TIP

JS-parannus — Tämän komponentin CSS renderöi ja toimii itsenäisesti; yhdistä se @pantoken/interactions:n kanssa lisätäksesi interaktiivisen käyttäytymisen. Sen -should-animate-muunnin ohjautuu tuosta käyttäytymisestä. Katso muunnostaulukko alla.

Saavutettavuus

Käytä natiivia <progress>:aa nollapohjaiseen tehtävänvalmiusasteeseen ja <meter>:ä, kun minimi ei ole nolla. Anna kummallekin elementille saavutettavissa oleva nimi upottamalla se <label>:een tai yhdistämällä erillinen <label> vastaavilla for- ja id-arvoilla.

Käyttö

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

Esimerkit

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>

Rakenne

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

Muokkaajat

Muokkaaja	Kuvaus
.-color-brand	Brändimittarin väri.
.-color-danger	Vaaramittarin väri.
.-color-info	Informatiivinen mittarin väri.
.-color-primary-inverse	Tummalla taustalla (primary inverse) käytettävä mittarin väri.
.-color-success	Onnistumismittarin väri.
.-color-warning	Varoitusmittarin väri.
.-meter-color-alert	Vanhentunut — use .-color-warning.
.-meter-color-brand	Vanhentunut — use .-color-brand.
.-meter-color-danger	Vanhentunut — use .-color-danger.
.-meter-color-info	Vanhentunut — use .-color-info.
.-meter-color-success	Vanhentunut — use .-color-success.
.-meter-color-warning	Vanhentunut — 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	Suuri. -size-lg:n pitkämuotoinen alias.
.-size-lg	Suuri.
.-size-md	Keskikokoinen (oletus).
.-size-medium	Keskikokoinen (oletus). Pitkämuotoinen alias -size-md:lle.
.-size-sm	Pieni.
.-size-small	Pieni. -size-sm:n pitkämuotoinen alias.
.-size-x-small	Erittäin pieni. -size-xs:n pitkämuotoinen alias.
.-size-xs	Erittäin pieni.

Osat

Osa	Kuvaus
.value	Arvoteksti, joka on keskitetty renkaan aukkoon.

Pseudo-elementit

Pseudo-elementti	Kuvaus
:::indeterminate	Mukautettu, ei osa InstUI:ta. Koskee vain natiivista <progress>:aa, jolta puuttuu value-attribuutti; pyörittää ::before:ta kiinteällä kaarella ja piilottaa .value-näytön.
::before	Piirtää itse renkaan: koniikkagradientti-donitsi, joka leikataan radiaalimaskilla ja jonka kaari seuraa --value-mukautettua ominaisuutta.

Tilat

Tila	Kuvaus
:indeterminate	—

Mukautetut ominaisuudet

Ominaisuus	Tyyppi	Oletus	Kuvaus
--animation-delay	<number>	—	Millisekunnit, jotka odotetaan ennen mount-animaation aloitusta (oletus 0).
--max	<number>	—	Suurin etenemis arvo (oletus 100).
--min	<number>	—	Pienin mittarin arvo (oletus 0).
--pantoken-pc-fill	<color>	—	Täytetyn kaaren (mittarin) väri; -color-* -muunnokset asettavat sen.
--pantoken-pc-stroke	<length>	—	Renkaan viivan leveys; -size-* -muunnokset määrittävät sen.
--pantoken-pc-track	<color>	—	Täyttämättömän uran väri.
--value	<number>	—	Nykyinen etenemis arvo; rekisteröity @property:llä, jotta se voi siirtyä (transition).
--value-max	<number>	—	@alias {@link --max} Suurin etenemis arvo (oletus 100).
--value-now	<number>	—	@alias Alias --value:lle.

Animaatiot

Animaatio	Kuvaus
pantoken-progress-circle-indeterminate	—

Käytetyt tokenit

Token	Tyyppi	Arvo
--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

Selaintuki

• Rekisteröi numeeriset etenemisominaisuudet @property:n kanssa ja maalautuu CSS:n mask:llä ja conic-gradient:lla; missä mukautettujen ominaisuuksien siirtymät eivät ole tuettuja, rengas silti renderöityy mutta ei animaudu.

Liittyvät

• progress — Sama määrityspohjainen etenemispalkin lineaarinen muoto.