CSS: progress-circle

.instui-progress-circle · stable — Okrągły pierścień postępu napędzany przez właściwości niestandardowe --value i --value-max.

Pierścień to pączek (conic-gradient) namalowany na ::before i przycięty maską radial-gradient; --value podzielone przez --value-max napędza łuk. Dodaj -should-animate i załaduj punkt wejścia interakcji, aby animować go od zera przy montowaniu. InstUI nie ma stanu niedeterminowanego; :indeterminate to jedynie najlepsze przypuszczenie pantoken (natywne <progress> bez atrybutu value), obracające pierścień z ustalonym łukiem i ukrywające .value, ponieważ nie ma sensownej liczby do pokazania. <meter> nie ma stanu niedeterminowanego, więc pozostaje niezmienione.

Source: progress-circle.css

TIP

Ulepszenie JS — CSS tego komponentu renderuje i działa samodzielnie; sparuj go z @pantoken/interactions, aby dodać zachowanie interaktywne. Jego modyfikator -should-animate jest sterowany przez to zachowanie. Zobacz tabelę modyfikatorów poniżej.

Dostępność

Użyj natywnego <progress> dla zakresu ukończenia zadania zaczynającego się od zera, a <meter> gdy minimalna wartość jest różna od zera. Nadaj któremukolwiek elementowi nazwę dostępną, umieszczając go wewnątrz <label> lub kojarząc oddzielny <label> przez dopasowanie wartości for i id.

Użycie

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

Przykłady

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;

Modyfikatory

Modyfikator	Opis
.-color-brand	Kolor wskaźnika marki.
.-color-danger	Kolor wskaźnika ostrzegawczego (danger).
.-color-info	Kolor wskaźnika informacyjnego.
.-color-primary-inverse	Kolor wskaźnika na ciemnym tle (primary inverse).
.-color-success	Kolor wskaźnika sukcesu.
.-color-warning	Kolor wskaźnika ostrzeżenia.
.-meter-color-alert	Przestarzałe — use .-color-warning.
.-meter-color-brand	Przestarzałe — use .-color-brand.
.-meter-color-danger	Przestarzałe — use .-color-danger.
.-meter-color-info	Przestarzałe — use .-color-info.
.-meter-color-success	Przestarzałe — use .-color-success.
.-meter-color-warning	Przestarzałe — 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	Duży. Pełna nazwa -size-lg.
.-size-lg	Duży.
.-size-md	Średni (domyślny).
.-size-medium	Średni (domyślny). Długa aliasowa forma -size-md.
.-size-sm	Mały.
.-size-small	Mały. Pełna nazwa -size-sm.
.-size-x-small	Bardzo mały. Pełna nazwa -size-xs.
.-size-xs	Bardzo mały.

Części

Część	Opis
.value	Tekst wartości wyśrodkowany w dziurze pierścienia.

Pseudo-elementy

Pseudo-element	Opis
:::indeterminate	Niestandardowe, nie będące częścią InstUI. Stosuje się tylko do natywnego <progress> pozbawionego atrybutu value; obraca ::before z ustalonym łukiem i ukrywa .value.
::before	Rysuje sam pierścień: pączek z conic-gradient przycięty maską radialną, którego łuk śledzi właściwość niestandardową --value.

Stany

Stan	Opis
:indeterminate	—

Własne właściwości

Właściwość	Typ	Domyślny	Opis
--animation-delay	<number>	—	Milisekundy oczekiwania przed rozpoczęciem animacji montowania (domyślnie 0).
--max	<number>	—	Maksymalna wartość postępu (domyślnie 100).
--min	<number>	—	Minimalna wartość wskaźnika (domyślnie 0).
--pantoken-pc-fill	<color>	—	Kolor wypełnionego łuku (wskaźnika); ustawia go modyfikator -color-*.
--pantoken-pc-stroke	<length>	—	Szerokość kreski pierścienia; ustawiana przez modyfikatory -size-*.
--pantoken-pc-track	<color>	—	Kolor niewypełnionego toru.
--value	<number>	—	Aktualna wartość postępu; zarejestrowana za pomocą @property, dzięki czemu może przechodzić animacje.
--value-max	<number>	—	@alias {@link --max} Maksymalna wartość postępu (domyślnie 100).
--value-now	<number>	—	@alias Alias dla --value.

Animacje

Animacja	Opis
pantoken-progress-circle-indeterminate	—

Zużyte tokeny

Token	Typ	Wartość
--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

Wsparcie przeglądarek

• Rejestruje numeryczne właściwości postępu z @property i maluje za pomocą CSS mask i conic-gradient; tam, gdzie przejścia właściwości niestandardowych nie są obsługiwane, pierścień nadal się renderuje, ale nie będzie animowany.

Powiązane

• progress — Liniowa, paskowa forma tego samego postępu determinate.