CSS: progress-circle

.instui-progress-circle · stable — Buolvttadeami ráinei mielddisvuohta máhcahuvvon --value ja --value-max čuovvut gávdnojit.

Ráne lea conic-gradient donutta mii leat mállan ::before ja čuovvut radiaal-gradient-maska; --value dividerejuvvo --value-max vuolggi árvvoheapmi árvvejuvvon. Oza -should-animate ja borrat interactions oassu dávjá animerejuvvon mannástaga. InstUI ii leat indeterminate stáhta; :indeterminate lea pantoken-olbmot best-guossi (natála <progress> ilbmi sáhttet ii leat value atributta), ráine vuođđá guovttosárvvusara arc ja peida .value das rohkkan vuođđahemi nummariin. <meter> ii leat indeterminate stáhta, danal olmmošiiii čuovvot.

Source: progress-circle.css

TIP

JS-ovddiduvvon — Dán komponentas CSS ráhkadit ja bargguid ođđaš; vuoigŋaárpmi @pantoken/interactions maid addit interaktiivalaččat. Sen -should-animate modifikátora válivuhttii debehterbehkka. Lávkái modifier table below.

Guhkkinjohka

Buktit natála <progress> zero-basis task-completion ránje ja <meter> go minimum lea ean-muhtun. Geavahuvvut jaokto element accessibala name vuosttaš <label> sisosa dahje searvvuheapmi erenoamáš <label> ovttasvuođaheami for ja id dego náit.

Buktáhašvuohta

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

Exempla

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>

Structura

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

Modifisuvnnat

Modifiserer	Deskripción
.-color-brand	Branda metrra fáhppu.
.-color-danger	Fáránus metrra fáhppu.
.-color-info	Info-metrra fáhppu.
.-color-primary-inverse	Ovddas-guovtti (primary inverse) metrra fáhppu.
.-color-success	Oahppat métrra fáhppu.
.-color-warning	Guhkkin metrra fáhppu.
.-meter-color-alert	Deprekereda — use .-color-warning.
.-meter-color-brand	Deprekereda — use .-color-brand.
.-meter-color-danger	Deprekereda — use .-color-danger.
.-meter-color-info	Deprekereda — use .-color-info.
.-meter-color-success	Deprekereda — use .-color-success.
.-meter-color-warning	Deprekereda — 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	Láhppi. Long-form alias -size-lg.
.-size-lg	Láhppi.
.-size-md	Meanta (default).
.-size-medium	Meanta (default). Vuosttaš alias birra -size-md.
.-size-sm	Gosse (Small).
.-size-small	Gosse. Long-form alias -size-sm.
.-size-x-small	Extra gosse. Long-form alias -size-xs.
.-size-xs	Extra gosse.

Dála

Dála	Deskripción
.value	Válddusat tekstta válddá ránei guovllas olbmuid.

Pseudo-elementtat

Pseudo-element	Deskripción
:::indeterminate	Ođđa, ii leat InstUI oassin. Gávdnat doarjut dat sadece natála <progress> ma leat muhto ii value atributta; vuođđá ::before guovttosárvvusara arc ja peida .value.
::before	Ránet čájeha: conic-gradient donutta mállan radiaal maskaga, mii arc čuovvut --value custom-propertyi maid.

Stáhtat

Státusa	Deskripción
:indeterminate	—

Ovvun-propertijat

Property	Type	Default	Deskripción
--animation-delay	<number>	—	Millisekunddat váris goas manná animašuvdnabirra (default 0).
--max	<number>	—	Máksimum progress-válggu (default 100).
--min	<number>	—	Minimuvn metrra válggu (default 0).
--pantoken-pc-fill	<color>	—	Juohke arc (metter) fáhppu; -color-* modifikátorat setet dan.
--pantoken-pc-stroke	<length>	—	Ráne stuorludávda čájeha; -size-* modifikátorat setet dan.
--pantoken-pc-track	<color>	—	Eará track fáhppu mat eai leat täldojit.
--value	<number>	—	Dál progress-válggu; registrerast @propertyi dahje sáhttá transicionehit.
--value-max	<number>	—	@alias {@link --max} Máksimum progress-válggu (default 100).
--value-now	<number>	—	@alias Alias --value-bargguidii.

Animasjonat

Animasjon	Deskripción
pantoken-progress-circle-indeterminate	—

Tokenat gaskkalit

Token	Type	Vaššun
--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

Browsera geavahit

• Registrer numerala progress-properties @property-lal ja mállá CSS mask ja conic-gradient ; go custom-property transitionat leat eai oahppat, ráine de galggašii čájehit muhto eai animere.

Dálkkodat

• progress — Linear bar-formsma dan same determinate progress.