CSS: progress

.instui-progress · stable — Una barra di progresso determinata con un indicatore colorato, dimensioni e un'etichetta di valore opzionale.

.value è un fratello di .bar, entrambi figli della radice — rispecchiando come progress-circle annida la propria parte .value. InstUI non ha uno stato indeterminato; :indeterminate è un'ipotesi specifica di pantoken (native <progress> senza l'attributo value), animando .bar come un segmento scorrevole e nascondendo .value poiché non c'è un numero significativo da mostrare. <meter> non ha uno stato indeterminato, quindi rimane inalterato.

Source: progress.css

Accessibilità

Usare il nativo <progress> per un intervallo di completamento attività a base zero e <meter> quando il minimo è diverso da zero. Dare a uno dei due elementi un nome accessibile annidandolo in <label> o associando un <label> separato tramite valori for e id corrispondenti.

Uso

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

Esempi

Nested label

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

External label

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

Struttura

// Variant: nested-label

label
  .instui-progress
    .bar
    .value

// Variant: external-label

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;

Modificatori

Modificatore	Descrizione
.-color-brand	Colore del misuratore brand.
.-color-danger	Colore del misuratore per pericolo.
.-color-info	Colore del misuratore informativo.
.-color-inverse	Per sfondi scuri.
.-color-primary-inverse	Colore del misuratore su sfondo scuro (inverse primario).
.-color-success	Colore del misuratore successo.
.-color-warning	Colore del misuratore avviso.
.-meter-color-alert	Deprecato — use .-color-warning.
.-meter-color-brand	Deprecato — use .-color-brand.
.-meter-color-danger	Deprecato — use .-color-danger.
.-meter-color-info	Deprecato — use .-color-info.
.-meter-color-success	Deprecato — use .-color-success.
.-meter-color-warning	Deprecato — use .-color-warning.
.-render-value-inside	Renderizza .value all'interno della traccia, allineato al suo inizio, invece che accanto ad essa; stilalo per garantire leggibilità rispetto al colore dell'indicatore.
.-should-animate	Interaction — Animate meter changes over half a second.
.-size-large	Grande. Alias esteso di -size-lg.
.-size-lg	Grande.
.-size-md	Medio (predefinito).
.-size-medium	Medio (predefinito). Alias in forma estesa di -size-md.
.-size-sm	Piccolo.
.-size-small	Piccolo. Alias esteso di -size-sm.
.-size-x-small	Extra small. Alias esteso di -size-xs.
.-size-xs	Extra small.

Parti

Parte	Descrizione
.bar	La barra dell'indicatore riempita.
.value	Il testo del valore accanto alla barra.

Pseudo-elementi

Pseudo-elemento	Descrizione
:::indeterminate	Personalizzato, non parte di InstUI. Si applica solo a una native <progress> priva dell'attributo value; anima .bar come un segmento scorrevole e nasconde .value.
::after	Disegna la linea inferiore della traccia come un proprio livello sopra l'indicatore, così che il bordo completo e il bordo inferiore rimangano indipendenti attraverso i temi.

Stati

Stato	Descrizione
:indeterminate	—

Proprietà personalizzate

Proprietà	Tipo	Predefinito	Descrizione
--max	<number>	—	Il valore massimo di progresso (predefinito 100).
--min	<number>	—	Il valore minimo del misuratore (predefinito 0).
--value	<number>	—	Il valore di progresso corrente.
--value-max	<number>	—	@alias {@link --max} Il valore massimo di progresso (predefinito 100).
--value-now	<number>	—	@alias Alias per --value.

Animazioni

Animazione	Descrizione
pantoken-progress-indeterminate	—

Token consumati

Token	Tipo	Valore
--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

Supporto browser

• Applica l'ambito alle regole della parte meter con la direttiva @scope; i browser senza supporto per @scope ignorano quelle regole scoperte.

Correlati

• progress-circle — La forma circolare della stessa barra di progresso determinata.