CSS: progress ​

.instui-progress · stable — Määrällinen edistymispalkki värillisellä mittarilla, eri kokoja ja valinnainen arvomerkintä.

.value on sisar .bar:lle, molemmat juuren lapsia — peilaten sitä, miten progress-circle upottaa oman .value-osansa. InstUI:lla ei ole määräämätöntä tilaa; :indeterminate on pantokenin oma paras arvaus (natiivinen <progress> ilman value-attribuuttia), joka animaationa liikuttaa .bar:a liukuvana segmenttinä ja piilottaa .value koska näytettävää merkityksellistä lukua ei ole. <meter>:lla ei ole määräämätöntä tilaa, joten se ei muutu.

Source: progress.css

Saavutettavuus ​

Käytä natiivia <progress>:aa nollapohjaiseen tehtävänvalmiusasteeseen ja <meter>:ä, kun minimi ei ole nolla. Anna kummallekin elementille saavutettavissa oleva nimi upottamalla se <label>:een tai yhdistämällä erillinen <label> vastaavilla for- ja id-arvoilla.

Käyttö ​

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

Esimerkit ​

Nested label ​

html
<label>
  Uploading Document: <progress class="instui-progress -color-brand" value="70">70%</progress>
</label>

External label ​

html
<label for="storage-used">Storage used</label>
<meter id="storage-used" class="instui-progress -color-warning" min="20" value="40" max="60">50%</meter>

Rakenne ​

// Variant: nested-label

text
label
  .instui-progress
    .bar
    .value

// Variant: external-label

text
label
.instui-progress
  .bar
  .value
flowchart TD subgraph sg0 ["nested-label"] n1["label"]:::cssdoc-root n2(".instui-progress"):::cssdoc-part n3(".bar"):::cssdoc-part n4(".value"):::cssdoc-part end subgraph sg5 ["external-label"] n6["label"]:::cssdoc-root n7[".instui-progress"]:::cssdoc-root n8(".bar"):::cssdoc-part n9(".value"):::cssdoc-part end n2 --> n3 n2 --> n4 n1 --> n2 n7 --> n8 n7 --> n9 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Muokkaajat ​

MuokkaajaKuvaus
.-color-brandBrändimittarin väri.
.-color-dangerVaaramittarin väri.
.-color-infoInformatiivinen mittarin väri.
.-color-inverseTummille taustoille.
.-color-primary-inverseTummalla taustalla (primary inverse) käytettävä mittarin väri.
.-color-successOnnistumismittarin väri.
.-color-warningVaroitusmittarin väri.
.-meter-color-alertVanhentunut — use .-color-warning.
.-meter-color-brandVanhentunut — use .-color-brand.
.-meter-color-dangerVanhentunut — use .-color-danger.
.-meter-color-infoVanhentunut — use .-color-info.
.-meter-color-successVanhentunut — use .-color-success.
.-meter-color-warningVanhentunut — use .-color-warning.
.-render-value-insideRenderöi .value radan sisään, kohdistettuna alkuunsa, sen sijaan että se olisi vieressä; tyylitä se luettavaksi mittarin värin päällä.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeSuuri. -size-lg:n pitkämuotoinen alias.
.-size-lgSuuri.
.-size-mdKeskikokoinen (oletus).
.-size-mediumKeskikokoinen (oletus). Pitkämuotoinen alias -size-md:lle.
.-size-smPieni.
.-size-smallPieni. -size-sm:n pitkämuotoinen alias.
.-size-x-smallErittäin pieni. -size-xs:n pitkämuotoinen alias.
.-size-xsErittäin pieni.

Osat ​

OsaKuvaus
.barTäytetty mittaripalkki.
.valuePalkin vieressä oleva arvoteksti.

Pseudo-elementit ​

Pseudo-elementtiKuvaus
:::indeterminateMukautettu, ei osa InstUI:ta. Käytetään vain natiiville <progress>:lle, jolta puuttuu value-attribuutti; animaationa liikuttaa .bar:a liukuvana segmenttinä ja piilottaa .value.
::afterPiirtää radan alaosan viivan omana kerroksenaan mittarin päälle, joten koko reunus ja alareuna pysyvät erillisinä teemoista riippumatta.

Tilat ​

TilaKuvaus
:indeterminate—

Mukautetut ominaisuudet ​

OminaisuusTyyppiOletusKuvaus
--max<number>—Suurin etenemis arvo (oletus 100).
--min<number>—Pienin mittarin arvo (oletus 0).
--value<number>—Tämänhetkinen edistysarvo.
--value-max<number>—@alias {@link --max} Suurin etenemis arvo (oletus 100).
--value-now<number>—@alias Alias --value:lle.

Animaatiot ​

AnimaatioKuvaus
pantoken-progress-indeterminate—

Käytetyt tokenit ​

TokenTyyppiArvo
--instui-color-background-brand<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-error<color>#E62429
--instui-color-background-info<color>#2B7ABC
--instui-color-background-success<color>#03893D
--instui-color-background-warning<color>#CF4A00
--instui-component-progress-bar-border-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-progress-bar-border-color-inverse<color>LightDarklight-dark(#ffffff, #6A7883)
--instui-component-progress-bar-border-radius<length>0.5rem
--instui-component-progress-bar-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-progress-bar-font-weight<integer>400
--instui-component-progress-bar-large-height<length>2rem
--instui-component-progress-bar-line-height<percentage>125%
--instui-component-progress-bar-medium-height<length>1.5rem
--instui-component-progress-bar-medium-value-font-size<length>1rem
--instui-component-progress-bar-meter-color-brand-inverse<color>LightDarklight-dark(#ffffff, #10141A)
--instui-component-progress-bar-small-height<length>1rem
--instui-component-progress-bar-text-color<color>LightDarklight-dark(#576773, #AAB0B5)
--instui-component-progress-bar-text-color-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-progress-bar-track-bottom-border-color<color>#00000000
--instui-component-progress-bar-track-bottom-border-color-inverse<color>#00000000
--instui-component-progress-bar-track-bottom-border-width<length>0.0625rem
--instui-component-progress-bar-track-color<color>#00000000
--instui-component-progress-bar-track-color-inverse<color>#00000000
--instui-component-progress-bar-value-padding<length>0.5rem
--instui-component-progress-bar-x-small-height<length>0.5rem

Selaintuki ​

  • Rajaa mittariosan tyylisäännöt @scope at-säännöllä; selaimet ilman @scope-tukea sivuuttavat nämä rajatut säännöt.

Liittyvät ​