CSS: progress

.instui-progress · stable — Une barre de progression déterminée avec un indicateur coloré, des tailles et une étiquette de valeur optionnelle.

.value is a sibling of .bar, both children of the root — mirroring how progress-circle nests its own .value part. InstUI has no indeterminate state; :indeterminate is a pantoken-only best guess (native <progress> without a value attribute), animating .bar as a sliding segment and hiding .value since there's no meaningful number to show. <meter> has no indeterminate state, so it's unaffected.

Source: progress.css

Accessibilité

Use native <progress> for a zero-based task completion range and <meter> when the minimum is non-zero. Give either element an accessible name by nesting it in <label> or associating a separate <label> through matching for and id values.

Utilisation

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>

Structure

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

Modificateurs

Modificateur	Description
`.-color-brand`	Couleur du repère de marque.
`.-color-danger`	Couleur du repère de danger.
`.-color-info`	Couleur du repère d'information.
`.-color-inverse`	Pour les fonds sombres.
`.-color-primary-inverse`	Couleur du repère pour fonds sombres (inverse principal).
`.-color-success`	Couleur du repère de succès.
`.-color-warning`	Couleur du repère d'avertissement.
`.-meter-color-alert`	Obsolète — use `.-color-warning`.
`.-meter-color-brand`	Obsolète — use `.-color-brand`.
`.-meter-color-danger`	Obsolète — use `.-color-danger`.
`.-meter-color-info`	Obsolète — use `.-color-info`.
`.-meter-color-success`	Obsolète — use `.-color-success`.
`.-meter-color-warning`	Obsolète — use `.-color-warning`.
`.-render-value-inside`	Affiche `.value` à l'intérieur de la piste, aligné sur son début, plutôt qu'à côté ; stylisez-le pour assurer la lisibilité sur la couleur de l'indicateur.
`.-should-animate`	Interaction — Animate meter changes over half a second.
`.-size-large`	Grand. Alias longue forme de `-size-lg`.
`.-size-lg`	Grand.
`.-size-md`	Moyen (par défaut).
`.-size-medium`	Moyen (par défaut). Alias longue forme de `-size-md`.
`.-size-sm`	Petit.
`.-size-small`	Petit. Alias longue forme de `-size-sm`.
`.-size-x-small`	Extra petit. Alias longue forme de `-size-xs`.
`.-size-xs`	Extra petit.

Parties

Partie	Description
`.bar`	La barre de progression remplie.
`.value`	Le texte de valeur à côté de la barre.

Pseudo-éléments

Pseudo-élément	Description
`:::indeterminate`	Custom, not part of InstUI. Applies only to a native `<progress>` missing its `value` attribute; animates `.bar` as a sliding segment and hides `.value`.
`::after`	Dessine la règle inférieure de la piste comme une couche séparée au-dessus de l'indicateur, afin que la bordure complète et la bordure inférieure restent indépendantes selon les thèmes.

États

État	Description
`:indeterminate`	—

Propriétés personnalisées

Propriété	Type	Défaut	Description
`--max`	`<number>`	—	La valeur maximale de progression (par défaut `100`).
`--min`	`<number>`	—	La valeur minimale du repère (par défaut `0`).
`--value`	`<number>`	—	La valeur de progression actuelle.
`--value-max`	`<number>`	—	@alias {@link --max} La valeur maximale de progression (par défaut `100`).
`--value-now`	`<number>`	—	@alias Alias pour `--value`.

Animations

Animation	Description
`pantoken-progress-indeterminate`	—

Jetons consommés

Token	Type	Valeur
`--instui-color-background-brand`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#1D354F, #EEF4FD)`
`--instui-component-progress-bar-border-color-inverse`	`<color>`	LightDark`light-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>`	LightDark`light-dark(#ffffff, #10141A)`
`--instui-component-progress-bar-small-height`	`<length>`	`1rem`
`--instui-component-progress-bar-text-color`	`<color>`	LightDark`light-dark(#576773, #AAB0B5)`
`--instui-component-progress-bar-text-color-inverse`	`<color>`	LightDark`light-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`

Prise en charge des navigateurs

Encadre les règles de la partie indicateur avec l'at-rule @scope ; les navigateurs sans support de @scope ignorent ces règles encadrées.

Liés

progress-circle — The circular form of the same determinate progress.

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: progress ​

Accessibilité ​

Utilisation ​

Exemples ​

Nested label ​

External label ​

Structure ​

Modificateurs ​

Parties ​

Pseudo-éléments ​

États ​

Propriétés personnalisées ​

Animations ​

Jetons consommés ​

Prise en charge des navigateurs ​

Liés ​