CSS: progress ​

.instui-progress · estable — Una barra de progreso determinada con un medidor coloreado, tamaños y una etiqueta de valor opcional.

.value es un hermano de .bar, ambos hijos de la raíz — reflejando cómo progress-circle anida su propia parte .value. InstUI no tiene un estado indeterminado; :indeterminate es una mejor suposición exclusiva de pantoken (nativo <progress> sin un atributo value), animando .bar como un segmento deslizante y ocultando .value ya que no hay un número significativo que mostrar. <meter> no tiene estado indeterminado, por lo que no se ve afectado.

Source: progress.css

Accesibilidad ​

Usa el <progress> nativo para un rango de finalización de tarea basado en cero y <meter> cuando el mínimo no sea cero. Dale a cualquiera de los elementos un nombre accesible anidándolo en <label> o asociando un <label> separado mediante valores coincidentes de for y id.

Uso ​

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

Ejemplos ​

Nested label ​

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

External label ​

html
<label for="storage-used">Almacenamiento usado</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;

Modificadores ​

ModificadorDescripción
.-color-brandColor de medidor de marca.
.-color-dangerColor de medidor de peligro.
.-color-infoColor de medidor informativo.
.-color-inversePara fondos oscuros.
.-color-primary-inverseColor de medidor en fondo oscuro (inverso primario).
.-color-successColor de medidor de éxito.
.-color-warningColor de medidor de advertencia.
.-meter-color-alertObsoleto — use .-color-warning.
.-meter-color-brandObsoleto — use .-color-brand.
.-meter-color-dangerObsoleto — use .-color-danger.
.-meter-color-infoObsoleto — use .-color-info.
.-meter-color-successObsoleto — use .-color-success.
.-meter-color-warningObsoleto — use .-color-warning.
.-render-value-insideRenderiza .value dentro de la pista, alineado al inicio, en lugar de junto a ella; estílelo para que sea legible sobre el color del medidor.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeGrande. Alias en forma larga de -size-lg.
.-size-lgGrande.
.-size-mdMedio (predeterminado).
.-size-mediumMedio (predeterminado). Alias de forma larga de -size-md.
.-size-smPequeño.
.-size-smallPequeño. Alias en forma larga de -size-sm.
.-size-x-smallExtra pequeño. Alias en forma larga de -size-xs.
.-size-xsExtra pequeño.

Partes ​

ParteDescripción
.barLa barra del medidor rellena.
.valueEl texto del valor junto a la barra.

Pseudoelementos ​

PseudoelementoDescripción
:::indeterminatePersonalizado, no forma parte de InstUI. Se aplica solo a un <progress> nativo que carece de su atributo value; anima .bar como un segmento deslizante y oculta .value.
::afterDibuja la regla inferior de la pista como su propia capa sobre el medidor, de modo que el borde completo y el borde inferior permanezcan independientes entre temas.

Estados ​

EstadoDescripción
:indeterminate—

Propiedades personalizadas ​

PropiedadTipoPredeterminadoDescripción
--max<number>—El valor máximo de progreso (predeterminado 100).
--min<number>—El valor mínimo del medidor (predeterminado 0).
--value<number>—El valor de progreso actual.
--value-max<number>—@alias {@link --max} El valor máximo de progreso (predeterminado 100).
--value-now<number>—@alias Alias de --value.

Animaciones ​

AnimaciónDescripción
pantoken-progress-indeterminate—

Tokens consumidos ​

TokenTipoValor
--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>LightDarklight-dark(#F0C16C, #8C6400)
--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

Compatibilidad con navegadores ​

  • Encapsula las reglas de la parte del medidor con la at-regla @scope; los navegadores sin soporte para @scope ignoran esas reglas acotadas.

Relacionado ​