CSS: progress-circle

.instui-progress-circle · stable — He mekameka ahu whakamua porowhita e driven e --value me ngā rawa ritenga --value-max.

Ko te mekameka he donut conic-gradient kua peita ki runga i ::before ka tapahia mā tētahi rehi ā-āhua radial; ko te --value tūturu mā te --value-max e tarai i te ārewa. Tāpirihia -should-animate ā, utahia te tomo taunekeneke hei whakatītaha i te nekehanga mai i te kore i te wā e whakauruhia ana. Kāore ā InstUI he āhua tauwehenga; ko :indeterminate he tatauranga pai noa mō pantoken (he <progress> taketake me te kore value āhuatanga), ka hurihia te mekameka i tētahi ārewa pūmau ā, ka huna i .value nā te kore he nama whai tikanga hei whakaatu. Kāore ā <meter> he āhua tauwehenga, nō reira kāore e pāngia.

Source: progress-circle.css

TIP

Whakawhānui JS — Ko te CSS o tēnei wahanga ka whakaatu ā, ka mahi anō i tōna ake; hono ki @pantoken/interactions kia tāpirihia te whanonga tānekeneke. Ko tōna kaitautoko -should-animate ka taraihia e taua whanonga. Tirohia te rārangi whakarerekē i raro.

Wātea mō te katoa

Whakamahia te <progress> taketake mō tētahi raweke oti mahi ā-tau me te tīmata i te kore, ā, whakamahia <meter> ina kua kore te iti te 0. Homai te ingoa whai wāhi ki tētahi o ēnei mā te whakanoho ki roto i <label> rānei mā te hono ki tētahi <label> rerekē mā te whakakotahi i ngā uara for me id.

Ngā Whakamahi

css

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

Ngā tauira

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>

Hanganga

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

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
`.-color-brand`	Tae mita waitohu.
`.-color-danger`	Tae mita tūraru.
`.-color-info`	Tae mō te pānui mōhiohio.
`.-color-primary-inverse`	Tae mita mō runga-kore (kaha matua inverse).
`.-color-success`	Tae mita angitu.
`.-color-warning`	Tae mita whakatūpato.
`.-meter-color-alert`	Kua tukuna — use `.-color-warning`.
`.-meter-color-brand`	Kua tukuna — use `.-color-brand`.
`.-meter-color-danger`	Kua tukuna — use `.-color-danger`.
`.-meter-color-info`	Kua tukuna — use `.-color-info`.
`.-meter-color-success`	Kua tukuna — use `.-color-success`.
`.-meter-color-warning`	Kua tukuna — 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`	Nui. He ingoa roa mō `-size-lg`.
`.-size-lg`	Nui.
`.-size-md`	Waenganui (taunoa).
`.-size-medium`	Waenganui (taunoa). He ingoa roa mō `-size-md`.
`.-size-sm`	Ititi.
`.-size-small`	Ititi. He ingoa roa mō `-size-sm`.
`.-size-x-small`	Ititi rawa. He ingoa roa mō `-size-xs`.
`.-size-xs`	Ititi rawa.

Wāhanga

Wāhanga	Whakamārama
`.value`	Te kuputuhi uara kei waenganui i te rua o te mekameka.

Ngā pseudo-kōwae

Pseudo-kōwae	Whakamārama
`:::indeterminate`	Whakaritea, kāore i te wāhanga o InstUI. Ka hāngai anake ki te `<progress>` taketake kāore he āhuatanga `value`; ka hurihia `::before` i tētahi ārewa pūmau ā, ka huna `.value`.
`::before`	E tā te rīngi anō: he donut rehi-conic kua tapahia ki tētahi ārai radial, ā, ko tōna ārewa e whai ana i te rawa ritenga `--value`.

Ngā āhuatanga

Tūnga	Whakamārama
`:indeterminate`	—

Ngā taonga ritenga

Rawa	Momo	Taunoa	Whakamārama
`--animation-delay`	`<number>`	—	Ngā hēkona kia tatari i mua i te tīmata o te whakatītaha whakaurunga (taunoa `0`).
`--max`	`<number>`	—	Te uara teitei rawa mō te ahu whakamua (taunoa `100`).
`--min`	`<number>`	—	Te uara iti rawa mō te mita (taunoa `0`).
`--pantoken-pc-fill`	`<color>`	—	Te tae o te ārewa kapi (te mita); ko ngā kaitautoko -color-* e tautuhi ana.
`--pantoken-pc-stroke`	`<length>`	—	Te whānui o te tohu o te mekameka; ko ngā kaitautoko -size-* e tautuhi ana.
`--pantoken-pc-track`	`<color>`	—	Te tae ara kāore i kapi.
`--value`	`<number>`	—	Te uara ahu whakamua o nāianei; kua rehitatia ki @property kia taea te whakawhitinga.
`--value-max`	`<number>`	—	@alias {@link --max} Te uara teitei rawa mō te ahu whakamua (taunoa `100`).
`--value-now`	`<number>`	—	@alias Ingoa pānui mō `--value`.

Ngā Whakaari

Whakaari	Whakamārama
`pantoken-progress-circle-indeterminate`	—

Ngā tohu i whakamahia

Token	Momo	Uara
`--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`

Tautoko pūtirotiro

Rehitatia ngā rawa tau ā-nomera ki @property ā, ka peita mā ngā CSS mask me conic-gradient; mēnā kāore ngā whakawhitinga rawa ritenga e tautokohia ka whakaatu tonu te rīngi engari kāore e neke.

Hono

progress — Te ahua pae tapawhā o te ahu whakamua taurite.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress-circle ​

Wātea mō te katoa ​

Ngā Whakamahi ​

Ngā tauira ​

Nested label ​

External label ​

Hanganga ​

Ngā Kaitī ​

Wāhanga ​

Ngā pseudo-kōwae ​

Ngā āhuatanga ​

Ngā taonga ritenga ​

Ngā Whakaari ​

Ngā tohu i whakamahia ​

Tautoko pūtirotiro ​

Hono ​