CSS: progress-circle

.instui-progress-circle · stable — Yon bag pwogrè sikilè kondwi pa pwopriyete koutim --value ak --value-max.

Bag la se yon donuts conic-gradient pentire sou ::before epi koupe ak yon mask radial-gradient; --value divize pa --value-max kondwi arc la. Ajoute -should-animate epi chaje pwen antre entèraksyon yo pou anime li soti nan zewo sou mount. InstUI pa gen eta endetèmine; :indeterminate se yon pi bon sipozisyon sèlman pou pantoken (natif <progress> san atribi value), k ap vire bag la ak yon arc fikse epi kache .value paske pa gen yon nimewo ki gen sans pou montre. <meter> pa gen eta endetèmine, kidonk li pa afekte.

Source: progress-circle.css

TIP

Amelyorasyon JS — CSS konpozan sa a rann epi li fonksyone poukont li; pè li ak @pantoken/interactions pou ajoute konpòtman entèraktif la. Modifikatè -should-animate li a kondwi pa konpòtman sa a. Wè tab modifikatè anba a.

Aksè

Sèvi ak natif <progress> pou yon ranje konplèman travay ki baze sou zewo epi <meter> lè minimòm lan pa zewo. Bay swa eleman yon non aksesib lè w mete l anndan <label> oswa asosye yon <label> separe atravè valè for ak id ki matche.

Itilizasyon

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

Egzanp

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>

Estrikti

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

Modifikatè

Modifikatè	Deskripsyon
.-color-brand	Koulè mezi mak mak marca.
.-color-danger	Koulè mezi danje.
.-color-info	Koulè mezi enfòmasyon.
.-color-primary-inverse	Koulè mezi sou fòn fonse (envès prensipal).
.-color-success	Koulè mezi siksè.
.-color-warning	Koulè mezi avètisman.
.-meter-color-alert	Depreke — use .-color-warning.
.-meter-color-brand	Depreke — use .-color-brand.
.-meter-color-danger	Depreke — use .-color-danger.
.-meter-color-info	Depreke — use .-color-info.
.-meter-color-success	Depreke — use .-color-success.
.-meter-color-warning	Depreke — 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	Gwo. Alias long fòm pou -size-lg.
.-size-lg	Gwo.
.-size-md	Mwayen (default).
.-size-medium	Mwayen (default). Aliaz long pou -size-md.
.-size-sm	Ti.
.-size-small	Ti. Alias long fòm pou -size-sm.
.-size-x-small	Ekstra piti. Alias long fòm pou -size-xs.
.-size-xs	Ekstra piti.

Pati

Pati	Deskripsyon
.value	Tèks valè a santre nan twou bag la.

Pseudo-eleman

Pseudo-eleman	Deskripsyon
:::indeterminate	Custom, pa fè pati InstUI. Aplike sèlman pou yon natif <progress> ki manke atribi value; vire ::before ak yon arc fikse epi kache .value.
::before	Desine bag la li menm: yon donuts conic-gradient koupe ak yon mask radial, kote arc la swiv pwopriyete koutim --value.

Eta

Eta	Deskripsyon
:indeterminate	—

Pwopriyete koutim

Pwopriyete	Tip	Pa defo	Deskripsyon
--animation-delay	<number>	—	Milisgond pou tann anvan kòmanse animasyon mount la (default 0).
--max	<number>	—	Valè maksimòm pwogrè a (default 100).
--min	<number>	—	Valè minimòm mezi a (default 0).
--pantoken-pc-fill	<color>	—	Koulè arc ranpli a (mezi); modifikatè -color-* yo mete li.
--pantoken-pc-stroke	<length>	—	Lajè transe bag la; modifikatè -size-* yo mete li.
--pantoken-pc-track	<color>	—	Koulè tras ki pa ranpli a.
--value	<number>	—	Valè pwogrè aktyèl la; anrejistre ak @property pou l kapab tranzisyonen.
--value-max	<number>	—	@alias {@link --max} Valè maksimòm pwogrè a (default 100).
--value-now	<number>	—	@alias Aliaz pou --value.

Animasyon

Animasyon	Deskripsyon
pantoken-progress-circle-indeterminate	—

Tokens konsome

Token	Tip	Valè
--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

Sipò navigatè

• Enrejistre pwopriyete nimerik pwogrè yo ak @property epi pentire ak CSS mask ak conic-gradient; kote tranzisyon pwopriyete koutim sipòte pa, bag la toujou rann men li pap anime.

Ki gen rapò

• progress — Fòm ba lineyè menm pwogrè determiné la.