CSS: progress-circle

.instui-progress-circle · stabil — En cirkulær fremdriftsring styret af --value og --value-max egnedefinerede egenskaber.

Ringen er en conic-gradient-donut malet på ::before og beskåret med en radial-gradient-maske; --value divideret med --value-max styrer buen. Tilføj -should-animate og indlæs interactions entry point for at animere den fra nul ved mount. InstUI har ingen indeterminate-tilstand; :indeterminate er et pantoken-only bedste gæt (native <progress> uden en value-attribut), der spinner ringen ved en fast bue og skjuler .value, da der ikke er noget meningsfuldt tal at vise. <meter> har ingen indeterminate-tilstand, så den påvirkes ikke.

Source: progress-circle.css

TIP

JS-forbedring — Komponentens CSS gengives og fungerer selvstændigt; par den med @pantoken/interactions for at tilføje den interaktive adfærd. Dens -should-animate modifier styres af den adfærd. Se modifier-tabellen nedenfor.

Tilgængelighed

Brug det indbyggede <progress> til et nulbaseret område for opgavefærdiggørelse og <meter> når minimumsværdien ikke er nul. Giv et af elementerne et tilgængeligt navn ved at indlejre det i en <label> eller ved at tilknytte en separat <label> via matchende for- og id-værdier.

Brug

css

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

Eksempler

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>

Struktur

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

Modifikatorer

Modifikator	Beskrivelse
`.-color-brand`	Farve på brandmåler
`.-color-danger`	Farve på faremåler.
`.-color-info`	Farve for informationsmåler.
`.-color-primary-inverse`	På mørk (primær invers) målerfarve.
`.-color-success`	Farve på succesmåler.
`.-color-warning`	Advarselsmålerfarve.
`.-meter-color-alert`	Udløbet — use `.-color-warning`.
`.-meter-color-brand`	Udløbet — use `.-color-brand`.
`.-meter-color-danger`	Udløbet — use `.-color-danger`.
`.-meter-color-info`	Udløbet — use `.-color-info`.
`.-meter-color-success`	Udløbet — use `.-color-success`.
`.-meter-color-warning`	Udløbet — 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`	Stor. Langform-alias af `-size-lg`.
`.-size-lg`	Stor.
`.-size-md`	Mellem (standard).
`.-size-medium`	Medium (standard). Langformet alias for `-size-md`.
`.-size-sm`	Lille.
`.-size-small`	Lille. Langform-alias af `-size-sm`.
`.-size-x-small`	Ekstra lille. Langform-alias af `-size-xs`.
`.-size-xs`	Ekstra lille.

Dele

Del	Beskrivelse
`.value`	Værditeksten centreret i ringens hul.

Pseudo-elementer

Pseudo-element	Beskrivelse
`:::indeterminate`	Tilpasset, ikke en del af InstUI. Gælder kun for en native `<progress>` uden `value`-attribut; drejer `::before` langs en fast bue og skjuler `.value`.
`::before`	Tegner selve ringen: en conic-gradient-donut beskåret med en radial maske, hvis bue følger den brugerdefinerede egenskab `--value`.

Tilstande

Tilstand	Beskrivelse
`:indeterminate`	—

Brugerdefinerede egenskaber

Egenskab	Type	Standard	Beskrivelse
`--animation-delay`	`<number>`	—	Millisekunder der skal ventes, før monteringsanimationen starter (standard `0`).
`--max`	`<number>`	—	Den maksimale fremskridtsværdi (standard `100`).
`--min`	`<number>`	—	Den minimale måleværdi (standard `0`).
`--pantoken-pc-fill`	`<color>`	—	Farven på den udfyldte bue (måler); -color-* modificatorerne angiver den.
`--pantoken-pc-stroke`	`<length>`	—	Ringens stregtykkelse; -size-* modifikatorerne angiver den.
`--pantoken-pc-track`	`<color>`	—	Farven på den ufyldte bane.
`--value`	`<number>`	—	Den aktuelle fremdriftsværdi; registreret med @property, så den kan gennemgå en overgang.
`--value-max`	`<number>`	—	@alias {@link --max} Den maksimale fremdriftsværdi (standard `100`).
`--value-now`	`<number>`	—	@alias Alias til `--value`.

Animationer

Animation	Beskrivelse
`pantoken-progress-circle-indeterminate`	—

Forbrugte tokens

Token	Type	Værdi
`--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`

Browserunderstøttelse

Registrerer de numeriske fremdrifts‑egenskaber med @property og maler med CSS mask og conic-gradient; hvor overgange for custom properties ikke understøttes, gengives ringen stadig, men den vil ikke animere.

Relateret

progress — Den lineære bjælkeform af samme determinerede fremgang.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Tilgængelighed ​

Brug ​

Eksempler ​

Nested label ​

External label ​

Struktur ​

Modifikatorer ​

Dele ​

Pseudo-elementer ​

Tilstande ​

Brugerdefinerede egenskaber ​

Animationer ​

Forbrugte tokens ​

Browserunderstøttelse ​

Relateret ​