CSS: progress ​

.instui-progress · stable — Una barra de progrés determinada amb un mesurador de color, mides i una etiqueta de valor opcional.

.value és un germà de .bar, tots dos fills de l'arrel — reflectint com progress-circle imbrica la seva pròpia part .value. InstUI no té estat indeterminat; :indeterminate és una millor estimació exclusiva de pantoken (native <progress> sense l'atribut value), animant .bar com un segment lliscant i ocultant .value ja que no hi ha un nombre significatiu per mostrar. <meter> no té estat indeterminat, així que no se'n veu afectat.

Source: progress.css

Accessibilitat ​

Utilitzeu <progress> natiu per a un rang de finalització de tasques basat en zero i <meter> quan el mínim no és zero. Doneu a qualsevol dels elements un nom accessible enquadrant-lo dins de <label> o associant un <label> separat mitjançant valors for i id coincidents.

Ús ​

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

Exemples ​

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>

Estructura ​

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

Modificadors ​

ModificadorDescripció
.-color-brandColor del medidor de marca.
.-color-dangerColor del medidor de perill.
.-color-infoColor del medidor informatiu.
.-color-inversePer a fons foscos.
.-color-primary-inverseColor del medidor per a fons fosc (inversió principal).
.-color-successColor del medidor d'èxit.
.-color-warningColor del medidor d'advertència.
.-meter-color-alertDeprecat — use .-color-warning.
.-meter-color-brandDeprecat — use .-color-brand.
.-meter-color-dangerDeprecat — use .-color-danger.
.-meter-color-infoDeprecat — use .-color-info.
.-meter-color-successDeprecat — use .-color-success.
.-meter-color-warningDeprecat — use .-color-warning.
.-render-value-insideMostra .value dins de la pista, alineat al seu inici en lloc d'al costat; estilitza'l perquè sigui llegible sobre el color del mesurador.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeGran. Àlies en forma llarga de -size-lg.
.-size-lgGran.
.-size-mdMitjà (per defecte).
.-size-mediumMitjà (per defecte). Àlies en forma llarga de -size-md.
.-size-smPetit.
.-size-smallPetit. Àlies en forma llarga de -size-sm.
.-size-x-smallExtra petit. Àlies en forma llarga de -size-xs.
.-size-xsExtra petit.

Parts ​

PartDescripció
.barLa barra del mesurador omplerta.
.valueEl text del valor al costat de la barra.

Pseudoelements ​

PseudoelementDescripció
:::indeterminatePersonalitzat, no forma part d'InstUI. S'aplica només a un <progress> natiu que li falta l'atribut value; anima .bar com un segment lliscant i amaga .value.
::afterDibuixa la línia inferior de la pista com una capa pròpia per sobre del mesurador, de manera que el contorn complet i la vora inferior siguin independents segons els temes.

Estats ​

EstatDescripció
:indeterminate—

Propietats personalitzades ​

PropietatTipusPredeterminatDescripció
--max<number>—El valor màxim de progrés (per defecte 100).
--min<number>—El valor mínim del medidor (per defecte 0).
--value<number>—El valor de progrés actual.
--value-max<number>—@alias {@link --max} El valor màxim de progrés (per defecte 100).
--value-now<number>—@alias Àlies per a --value.

Animacions ​

AnimacióDescripció
pantoken-progress-indeterminate—

Tokens consumits ​

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

Suport del navegador ​

  • Limita l'abast de les regles de la part del mesurador amb l'at-rule @scope; els navegadors sense suport per @scope ignoren aquestes regles.

Relacionat ​