CSS: progress-circle ​

.instui-progress-circle · stable — Een circulair voortgangsrinkje aangedreven door de custom properties --value en --value-max.

De ring is een conic-gradient donut geschilderd op ::before en geclipt met een radial-gradient mask; --value gedeeld door --value-max stuurt de boog aan. Voeg -should-animate toe en laad het interactions entry point om deze vanaf nul bij mount te animeren. InstUI heeft geen indeterminate toestand; :indeterminate is een alleen-pantoken beste gok (native <progress> zonder een value attribuut), roteert de ring met een vaste boog en verbergt .value aangezien er geen zinvol getal is om weer te geven. <meter> heeft geen indeterminate toestand, dus het blijft onaangetast.

Source: progress-circle.css

TIP

JS-verbetering — De CSS van deze component rendert en werkt op zichzelf; combineer met @pantoken/interactions om het interactieve gedrag toe te voegen. De -should-animate modifier wordt door dat gedrag aangestuurd. Zie de modifier table below.

Toegankelijkheid ​

Gebruik native <progress> voor een nul-gebaseerd taakvoltooiingsbereik en <meter> wanneer het minimum niet-nul is. Geef elk element een toegankelijke naam door het te nestelen in <label> of door een afzonderlijk <label> te associëren via overeenkomende for en id waarden.

Gebruik ​

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

Voorbeelden ​

Nested label ​

html
<label>
  Document uploaden: <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>

Structuur ​

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

Modifiers ​

ModifierBeschrijving
.-color-brandMerkkleur voor de meter.
.-color-dangerGevaar-meterkleur.
.-color-infoInformatieve meterkleur.
.-color-primary-inverseOn-dark (primaire inverse) meterkleur.
.-color-successSucces-meterkleur.
.-color-warningWaarschuwing-meterkleur.
.-meter-color-alertVerouderd — use .-color-warning.
.-meter-color-brandVerouderd — use .-color-brand.
.-meter-color-dangerVerouderd — use .-color-danger.
.-meter-color-infoVerouderd — use .-color-info.
.-meter-color-successVerouderd — use .-color-success.
.-meter-color-warningVerouderd — 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-largeGroot. Langvormig alias van -size-lg.
.-size-lgGroot.
.-size-mdMedium (standaard).
.-size-mediumMedium (standaard). Langvormig alias van -size-md.
.-size-smKlein.
.-size-smallKlein. Langvormig alias van -size-sm.
.-size-x-smallExtra klein. Langvormig alias van -size-xs.
.-size-xsExtra klein.

Onderdelen ​

OnderdeelBeschrijving
.valueDe waardetekst gecentreerd in het gat van de ring.

Pseudo-elementen ​

Pseudo-elementBeschrijving
:::indeterminateAangepast, geen deel van InstUI. Toepasselijk alleen op een native <progress> die zijn value attribuut mist; roteert ::before met een vaste boog en verbergt .value.
::beforeTekent de ring zelf: een conic-gradient donut geclipt met een radiale mask, waarvan de boog de custom property --value volgt.

Staten ​

ToestandBeschrijving
:indeterminate—

Aangepaste eigenschappen ​

EigenschapTypeStandaardBeschrijving
--animation-delay<number>—Milliseconden om te wachten voordat de mount-animatie start (standaard 0).
--max<number>—De maximale voortgangswaarde (standaard 100).
--min<number>—De minimale meterwaarde (standaard 0).
--pantoken-pc-fill<color>—De kleur van de gevulde boog (meter); de -color-* modifiers stellen deze in.
--pantoken-pc-stroke<length>—De stroke-breedte van de ring; de -size-* modifiers stellen deze in.
--pantoken-pc-track<color>—De kleur van de onvervulde track.
--value<number>—De huidige voortgangswaarde; geregistreerd met @property zodat deze kan overgaan.
--value-max<number>—@alias {@link --max} De maximale voortgangswaarde (standaard 100).
--value-now<number>—@alias Alias voor --value.

Animaties ​

AnimatieBeschrijving
pantoken-progress-circle-indeterminate—

Gebruikte tokens ​

TokenTypeWaarde
--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

Browserondersteuning ​

  • Registreert de numerieke voortgangsproperties met @property en schildert met CSS mask en conic-gradient; waar custom-property-transities niet worden ondersteund, rendert de ring nog steeds maar zal niet animeren.

Gerelateerd ​

  • progress — De lineaire balkvorm van dezelfde determinate voortgang.