CSS: progress-circle

.instui-progress-circle · stable — Krožni indikator napredka, ki ga poganjata prilagojeni lastnosti --value in --value-max.

Obroč je conic-gradient „donut“ narisan na ::before in zatemnjen z radialno-gradijentno masko; lok poganja razmerje --value deljeno z --value-max. Dodajte -should-animate in naložite vstopno točko interakcij, da ga animirate iz nič ob priklopu. InstUI nima nedoločene (indeterminate) države; :indeterminate je pantokenova najboljša ocena (nativni <progress> brez atributa value), ki vrti obroč pri fiksnem loku in skriva .value, saj ni smiselne številke za prikaz. <meter> nima nedoločene države, zato nanj to ne vpliva.

Source: progress-circle.css

TIP

Izboljšava JS — CSS tega komponenta se upodobi in deluje samostojno; združite ga z @pantoken/interactions za dodajanje interaktivnega vedenja. Njegov modifikator -should-animate poganja to vedenje. Oglejte si tabelo modifikatorjev spodaj.

Dostopnost

Uporabite nativni <progress> za obseg dokončanja naloge, ki se začne pri nič, in <meter> kadar je minimum različen od nič. Dajte kateremu koli elementu dostopno ime tako, da ga vnesete v <label> ali povežete ločen <label> s pomočjo ujemajočih se vrednosti for in id.

Uporaba

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

Primeri

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>

Struktura

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

Spremenljivke (modifikatorji)

Modifikator	Opis
.-color-brand	Barva merilnika znamke.
.-color-danger	Barva merilnika nevarnosti.
.-color-info	Informativna barva merilnika.
.-color-primary-inverse	Barva merilnika za temno podlago (primarni inverz).
.-color-success	Barva merilnika uspeha.
.-color-warning	Barva merilnika opozorila.
.-meter-color-alert	Zastarelo — use .-color-warning.
.-meter-color-brand	Zastarelo — use .-color-brand.
.-meter-color-danger	Zastarelo — use .-color-danger.
.-meter-color-info	Zastarelo — use .-color-info.
.-meter-color-success	Zastarelo — use .-color-success.
.-meter-color-warning	Zastarelo — 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	Veliko. Dolga oblika aliasa za -size-lg.
.-size-lg	Veliko.
.-size-md	Srednje (privzeto).
.-size-medium	Srednje (privzeto). Dolga alias oblika za -size-md.
.-size-sm	Majhno.
.-size-small	Majhno. Dolga oblika aliasa za -size-sm.
.-size-x-small	Zelo majhno. Dolga oblika aliasa za -size-xs.
.-size-xs	Zelo majhno.

Delii

Del	Opis
.value	Besedilo vrednosti, centrirano v luknji obroča.

Psevdo-elementi

Psevdo-element	Opis
:::indeterminate	Prilagojeno, ni del InstUI. Velja samo za nativni <progress>, ki mu manjka atribut value; vrti ::before pri fiksnem loku in skriva .value.
::before	Riše sam obroč: donut iz koničnega gradienta z radialno masko, katere lok sledi prilagojeni lastnosti --value.

Stanja

Stanje	Opis
:indeterminate	—

Lastnosti po meri

Lastnost	Tip	Privzeto	Opis
--animation-delay	<number>	—	Milisekunde, ki jih je treba počakati pred začetkom montažne animacije (privzeto 0).
--max	<number>	—	Največja vrednost napredka (privzeto 100).
--min	<number>	—	Najmanjša vrednost merilnika (privzeto 0).
--pantoken-pc-fill	<color>	—	Barva napolnjenega loka (merilnika); nastavi jojo modifikatorji -color-*.
--pantoken-pc-stroke	<length>	—	Debelina poteze obroča; nastavi jo modifikator -size-*.
--pantoken-pc-track	<color>	—	Barva nepokrite poti.
--value	<number>	—	Trenutna vrednost napredka; registrirana z @property, da se lahko tranzicijsko spreminja.
--value-max	<number>	—	@alias {@link --max} Največja vrednost napredka (privzeto 100).
--value-now	<number>	—	@alias Alias za --value.

Animacije

Animacija	Opis
pantoken-progress-circle-indeterminate	—

Porabljeni žetoni

Token	Tip	Vrednost
--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

Podpora brskalnika

• Registrira numerične lastnosti napredka z @property in riše s CSS mask in conic-gradient; kjer prehodi prilagojenih lastnosti niso podprti, se obroč še vedno upodobi, vendar ne bo animiran.

Sorodno

• progress — Linearna vrstica iste določene oblike napredka.