CSS: progress-circle

.instui-progress-circle · stöðug — Hringlaga framvindahringur sem stýrist af sérsniðnum breytum --value og --value-max.

Hringurinn er conic-gradient kleinuhringur málaður á ::before og klipptur með radial-gradient maska; --value deilt með --value-max stýrir boga. Bætið við -should-animate og hlaðið interactions inngöngupunktinn til að animera hann frá núlli við upphaf. InstUI hefur enga óákveðna stöðu; :indeterminate er pantoken-einungis besta ágiskun (innbyggður <progress> án value eiginleika), snýst hringurinn með föstum boga og felur .value þar sem engin merkingarbær tala er til sýnis. <meter> hefur enga óákveðna stöðu, svo það breytist ekki.

Source: progress-circle.css

TIP

JS viðbót — CSS þessa íhluta birtist og virkar sjálfstætt; paraðu það við @pantoken/interactions til að bæta við gagnvirkri hegðun. Breytirinn -should-animate er stýrður af þeirri hegðun. Sjá breytutöflu hér að neðan.

Aðgengi

Notið innbyggða <progress> fyrir verkefnishlutfall sem byrjar á núlli og <meter> þegar lágmarkið er ekki núll. Gefið hvoru tveggja frumefnanna aðgengilegt nafn með því að innlima þau í <label> eða tengja aðskilið <label> með samsvarandi for- og id-gildum.

Notkun

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

Dæmi

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>

Uppbygging

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

Breytingar

Breyti	Lýsing
.-color-brand	Litur vörumerkjamælis.
.-color-danger	Litur hættumælis.
.-color-info	Litur upplýsingamælis.
.-color-primary-inverse	Mælislitur fyrir dökkan bakgrunn (primary inverse).
.-color-success	Litur árangursmælis.
.-color-warning	Litur viðvörunarmælis.
.-meter-color-alert	Úrelt — use .-color-warning.
.-meter-color-brand	Úrelt — use .-color-brand.
.-meter-color-danger	Úrelt — use .-color-danger.
.-meter-color-info	Úrelt — use .-color-info.
.-meter-color-success	Úrelt — use .-color-success.
.-meter-color-warning	Úrelt — 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	Stór. Lengri alias af -size-lg.
.-size-lg	Stór.
.-size-md	Miðlungs (sjálfgefið).
.-size-medium	Medium (sjálfgefið). Lengra alias fyrir -size-md.
.-size-sm	Lítill.
.-size-small	Lítill. Lengri alias af -size-sm.
.-size-x-small	Auka lítill. Lengri alias af -size-xs.
.-size-xs	Auka lítill.

Hlutar

Hluti	Lýsing
.value	Gilditexti miðjaður í holu hringsins.

Sýndareiningar

Sýndareining	Lýsing
:::indeterminate	Sérsniðið, ekki hluti af InstUI. Gildir aðeins fyrir innbyggða <progress> sem vantar value-eiginleikann; snýr ::before um fasta boga og felur .value.
::before	Teiknar hringinn sjálfan: conic-gradient „donut“ klipptur með radial masku, þar sem boginn fylgir sérsniðnu eiginleikanum --value.

Stöður

Staða	Lýsing
:indeterminate	—

Sérsniðnar eigindir

Eiginleiki	Tegund	Sjálfgefið	Lýsing
--animation-delay	<number>	—	Millisekúndur sem á að bíða áður en uppsetningarhreyfimynd hefst (sjálfgefið 0).
--max	<number>	—	Hámarks framfaragildi (sjálfgefið 100).
--min	<number>	—	Lágmarks gildi mælisins (sjálfgefið 0).
--pantoken-pc-fill	<color>	—	Litur fyllta boga (mælis); -color-* breytur stilla hann.
--pantoken-pc-stroke	<length>	—	Útlínubreidd hringsins; -size-* breytur stilla hana.
--pantoken-pc-track	<color>	—	Litur ófylltrar brautar.
--value	<number>	—	Núverandi gildi framvindu; skráð með @property svo það geti farið í yfirfærslu.
--value-max	<number>	—	@alias {@link --max} Hámarks gildi framvindu (sjálfgefið 100).
--value-now	<number>	—	@alias Gervinafn fyrir --value.

Hreyfimyndir

Hreyfimynd	Lýsing
pantoken-progress-circle-indeterminate	—

Notuð tákn

Token	Tegund	Gildi
--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

Vafrastuðningur

Skráir tölulegu framvindu-eiginleikana með @property og málar með CSS mask og conic-gradient; þar sem yfirfærslur á sérsniðnum eigindum eru ekki studdar, teiknast hringurinn samt en mun ekki hreyfast.

Tengdar

• progress — Línuleg stikaútgáfa af sömu ákvörðuðu framvindu.