CSS: progress-circle

.instui-progress-circle · stable — Un anell de progrés circular impulsat per les propietats personalitzades --value i --value-max.

L'anell és una rosquilla conic-gradient pintada sobre ::before i retallada amb una màscara radial-gradient; --value dividit per --value-max impulsa l'arc. Afegiu -should-animate i carregueu el punt d'entrada d'interaccions per animar-lo des de zero en el muntatge. InstUI no té un estat indeterminat; :indeterminate és una millor suposició pròpia de pantoken (<progress> natiu sense un atribut value), fent girar l'anell amb un arc fix i amagant .value ja que no hi ha un nombre significatiu per mostrar. <meter> no té estat indeterminat, així que no se'n veu afectat.

Source: progress-circle.css

TIP

Millora JS — El CSS d'aquest component es representa i funciona per si sol; emparelleu-lo amb @pantoken/interactions per afegir el comportament interactiu. El seu modificador -should-animate està controlat per aquell comportament. Vegeu la taula de modificadors.

Accessibilitat

Utilitzeu <progress> natiu per a un rang de finalització de tasques basat en zero i <meter> quan el mínim no és zero. Doneu a qualsevol dels elements un nom accessible enquadrant-lo dins de <label> o associant un <label> separat mitjançant valors for i id coincidents.

Ús

css

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

Exemples

Nested label

html

<label>
  Uploading Document: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label

html

<label for="score">Score</label>
<meter id="score" class="instui-progress-circle -color-success" min="20" value="40" max="60">50%</meter>

Estructura

// Variant: nested-label

text

label
  .instui-progress-circle
    .value

// Variant: external-label

text

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;

Modificadors

Modificador	Descripció
`.-color-brand`	Color del medidor de marca.
`.-color-danger`	Color del medidor de perill.
`.-color-info`	Color del medidor informatiu.
`.-color-primary-inverse`	Color del medidor per a fons fosc (inversió principal).
`.-color-success`	Color del medidor d'èxit.
`.-color-warning`	Color del medidor d'advertència.
`.-meter-color-alert`	Deprecat — use `.-color-warning`.
`.-meter-color-brand`	Deprecat — use `.-color-brand`.
`.-meter-color-danger`	Deprecat — use `.-color-danger`.
`.-meter-color-info`	Deprecat — use `.-color-info`.
`.-meter-color-success`	Deprecat — use `.-color-success`.
`.-meter-color-warning`	Deprecat — 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`	Gran. Àlies en forma llarga de `-size-lg`.
`.-size-lg`	Gran.
`.-size-md`	Mitjà (per defecte).
`.-size-medium`	Mitjà (per defecte). Àlies en forma llarga de `-size-md`.
`.-size-sm`	Petit.
`.-size-small`	Petit. Àlies en forma llarga de `-size-sm`.
`.-size-x-small`	Extra petit. Àlies en forma llarga de `-size-xs`.
`.-size-xs`	Extra petit.

Parts

Part	Descripció
`.value`	El text del valor centrat al forat de l'anell.

Pseudoelements

Pseudoelement	Descripció
`:::indeterminate`	Personalitzat, no forma part d'InstUI. S'aplica només a un `<progress>` natiu que li falti l'atribut `value`; fa girar `::before` amb un arc fix i amaga `.value`.
`::before`	Dibuixa l'anell en si: una rosquilla conic-gradient retallada amb una màscara radial, el cui arc segueix la propietat personalitzada `--value`.

Estats

Estat	Descripció
`:indeterminate`	—

Propietats personalitzades

Propietat	Tipus	Predeterminat	Descripció
`--animation-delay`	`<number>`	—	Mil·lisegons a esperar abans d'iniciar l'animació de muntatge (per defecte `0`).
`--max`	`<number>`	—	El valor màxim de progrés (per defecte `100`).
`--min`	`<number>`	—	El valor mínim del medidor (per defecte `0`).
`--pantoken-pc-fill`	`<color>`	—	El color de l'arc omplert (medidor); els modificadors -color-* el defineixen.
`--pantoken-pc-stroke`	`<length>`	—	L'amplada del traç de l'anell; els modificadors -size-* la defineixen.
`--pantoken-pc-track`	`<color>`	—	El color de la pista no omplerta.
`--value`	`<number>`	—	El valor de progrés actual; registrat amb @property perquè pugui transicionar.
`--value-max`	`<number>`	—	@alias {@link --max} El valor màxim de progrés (per defecte `100`).
`--value-now`	`<number>`	—	@alias Àlies per a `--value`.

Animacions

Animació	Descripció
`pantoken-progress-circle-indeterminate`	—

Tokens consumits

Token	Tipus	Valor
`--instui-component-progress-circle-color`	`<color>`	LightDark`light-dark(#273540, #ffffff)`
`--instui-component-progress-circle-color-inverse`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-progress-circle-meter-color-brand-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-danger`	`<color>`	`#E62429`
`--instui-component-progress-circle-meter-color-danger-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-info`	`<color>`	`#2B7ABC`
`--instui-component-progress-circle-meter-color-info-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-success`	`<color>`	`#03893D`
`--instui-component-progress-circle-meter-color-success-inverse`	`<color>`	LightDark`light-dark(#ffffff, #6A7883)`
`--instui-component-progress-circle-meter-color-warning`	`<color>`	`#CF4A00`
`--instui-component-progress-circle-meter-color-warning-inverse`	`<color>`	LightDark`light-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>`	LightDark`light-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`

Suport del navegador

Registra les propietats numèriques de progrés amb @property i pinta amb CSS mask i conic-gradient; on les transicions de propietats personalitzades no són compatibles, l'anell encara es renderitza però no s'animarà.

Relacionat

progress — La forma lineal de barra del mateix progrés determinat.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Accessibilitat ​

Ús ​

Exemples ​

Nested label ​

External label ​

Estructura ​

Modificadors ​

Parts ​

Pseudoelements ​

Estats ​

Propietats personalitzades ​

Animacions ​

Tokens consumits ​

Suport del navegador ​

Relacionat ​