CSS: progress-circle ​

.instui-progress-circle · stable — Rêl cynnydd cylchol a yrrir gan briopertiau arferol --value a --value-max.

Mae'r rêl yn dognwt conic-gradient wedi'i baentio ar ::before a'i dorri gyda masg graddiant_radial; mae --value wedi'i rannu gan --value-max yn gyrru'r arc. Ychwanegwch -should-animate a llwythwch y pwynt mynediad rhyngweithio i'i animeiddio o sero wrth fwrn. Nid oes gan InstUI gyflwr anhysbys; mae :indeterminate yn dyfalu gorau ar gyfer pantoken yn unig (natif <progress> heb briodwedd value), yn troi'r rêl ar arc sefydlog ac yn cuddio .value gan nad oes rhif ystyrlon i'w ddangos. Nid oes gan <meter> gyflwr anhysbys, felly nid yw'n cael ei effeithio.

Source: progress-circle.css

TIP

Gwelliant JS — Mae CSS y cydran hon yn rendro ac yn gweithio ar ei phen ei hun; cyfatebiwch ef ag @pantoken/interactions i ychwanegu'r ymddygiad rhyngweithiol. Caiff ei foddifier -should-animate ei reoli gan y ymddygiad hwnnw. Gweler y tabledi foddifier isod.

Hygyrchedd ​

Defnyddiwch <progress> natifol ar gyfer ystod cwblhau tasg sy'n dechrau ar sero a <meter> pan nad yw'r lleiaf yn sero. Rhoddwch enw hygyrch i unrhyw elfen trwy ei chynnwys mewn <label> neu drwy gysylltu <label> ar wahân trwy werthoedd for a id cyfatebol.

Defnydd ​

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

Enghreifftiau ​

Nested label ​

html
<label>
  Llwytho Dogfen: <progress class="instui-progress-circle -size-sm" value="70">70%</progress>
</label>

External label ​

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

Strwythur ​

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

Modyfiwyr ​

ModyfiwrDisgrifiad
.-color-brandLliw metrau brand.
.-color-dangerLliw metrau perygl.
.-color-infoLliw metrau gwybodaeth.
.-color-primary-inverseLliw metrau ar gefn du (gwrthwynebiad prifol).
.-color-successLliw metrau llwyddiant.
.-color-warningLliw metrau rhybudd.
.-meter-color-alertWedi'i henffurfio — use .-color-warning.
.-meter-color-brandWedi'i henffurfio — use .-color-brand.
.-meter-color-dangerWedi'i henffurfio — use .-color-danger.
.-meter-color-infoWedi'i henffurfio — use .-color-info.
.-meter-color-successWedi'i henffurfio — use .-color-success.
.-meter-color-warningWedi'i henffurfio — use .-color-warning.
.-shold-animate-on-mountAlias — maps to .-should-animate.
.-should-animateInteraction — Animate the meter, ring, and centered value into place on mount.
.-should-animate-on-mountAlias — maps to .-should-animate.
.-size-largeMawr. Enw hir ffurf -size-lg.
.-size-lgMawr.
.-size-mdCanol (diofyn).
.-size-mediumCanol (diofyn). Enw hir — ailgyfeiriad i -size-md.
.-size-smBach.
.-size-smallBach. Enw hir ffurf -size-sm.
.-size-x-smallEithriadol bach. Enw hir ffurf -size-xs.
.-size-xsEithriadol bach.

Rhannau ​

RhanDisgrifiad
.valueY testun gwerth wedi'i ganoli yn nghyfraith y twnel yn y rêl.

Is-elfennau ​

Is-elfenDisgrifiad
:::indeterminateCustom, nid yn rhan o InstUI. Yn berthnasol i <progress> natifol sydd heb ei briodwedd value yn unig; yn troi ::before ar arc sefydlog ac yn cuddio .value.
::beforeYn tynnu'r rêl ei hun: dognwt graddiant_conic wedi'i dorri gyda masg raddiadol, ac mae ei arc yn dilyn y briopertiwr arferol --value.

Statwsau ​

StatwsDisgrifiad
:indeterminate—

Priodweddau arferiad ​

EiddoMathDiofynDisgrifiad
--animation-delay<number>—Milli eiliadau i aros cyn cychwyn animeiddiad mwrn (diofyn 0).
--max<number>—Y gwerth cynnydd uchaf (diofyn 100).
--min<number>—Y gwerth metar lleiaf (diofyn 0).
--pantoken-pc-fill<color>—Lliw yr arc lenwyd (metar); mae'r modffwyr -color-* yn ei sefydlu.
--pantoken-pc-stroke<length>—Lled streic y rêl; mae'r modffwyr -size-* yn ei sefydlu.
--pantoken-pc-track<color>—Lliw y trac heb ei lenwi.
--value<number>—Y gwerth cynnydd cyfredol; wedi'i gofrestru gyda @property fel y gall drosglwyddo.
--value-max<number>—@alias {@link --max} Y gwerth cynnydd uchaf (diofyn 100).
--value-now<number>—@alias Ailgyfeiriad i --value.

Animeiddiadau ​

AnimeiddiadDisgrifiad
pantoken-progress-circle-indeterminate—

Tocynnau a ddefnyddiwyd ​

TokenMathGwerth
--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>LightDarklight-dark(#F0C16C, #8C6400)
--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

Cefnogaeth porwr ​

  • Cofrestru'r priodweddau rhifol cynnydd gyda @property a phaentio gyda CSS mask a conic-gradient; lle nad oes cefnogaeth i drosglwyddiadau priopertiwr- arferol, mae'r rêl yn dal i rendro ond ni fydd yn animeiddio.

Perthnasol ​

  • progress — Ffurf bar linol yr un cynnydd diffiniedig.