CSS: progress ​

.instui-progress · stable — Uma barra de progresso determinada com um medidor colorido, tamanhos e um rótulo de valor opcional.

.value é um irmão de .bar, ambos filhos da raiz — espelhando como progress-circle aninha sua própria parte .value. O InstUI não possui estado indeterminado; :indeterminate é um palpite exclusivo do pantoken (nativo <progress> sem o atributo value), animando .bar como um segmento deslizante e ocultando .value já que não há um número significativo a exibir. <meter> não tem estado indeterminado, portanto não é afetado.

Source: progress.css

Acessibilidade ​

Use o <progress> nativo para um intervalo de conclusão de tarefa baseado em zero e <meter> quando o mínimo for diferente de zero. Dê a qualquer um dos elementos um nome acessível aninhando‑o em <label> ou associando um <label> separado através de valores for e id correspondentes.

Uso ​

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

Exemplos ​

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>

Estrutura ​

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

ModificadorDescrição
.-color-brandCor do medidor de marca.
.-color-dangerCor do medidor de perigo.
.-color-infoCor do medidor informativo.
.-color-inversePara fundos escuros.
.-color-primary-inverseCor do medidor em fundo escuro (inverso primário).
.-color-successCor do medidor de sucesso.
.-color-warningCor do medidor de aviso.
.-meter-color-alertDeprecated — use .-color-warning.
.-meter-color-brandDeprecated — use .-color-brand.
.-meter-color-dangerDeprecated — use .-color-danger.
.-meter-color-infoDeprecated — use .-color-info.
.-meter-color-successDeprecated — use .-color-success.
.-meter-color-warningDeprecated — use .-color-warning.
.-render-value-insideRenderiza .value dentro da trilha, alinhado ao seu início, em vez de ao lado; estilize-o para legibilidade sobre a cor do medidor.
.-should-animateInteraction — Animate meter changes over half a second.
.-size-largeGrande. Aliás em forma longa de -size-lg.
.-size-lgGrande.
.-size-mdMédio (padrão).
.-size-mediumMédio (padrão). Forma longa do alias de -size-md.
.-size-smPequeno.
.-size-smallPequeno. Aliás em forma longa de -size-sm.
.-size-x-smallExtra pequeno. Aliás em forma longa de -size-xs.
.-size-xsExtra pequeno.

Partes ​

ParteDescrição
.barA barra de medidor preenchida.
.valueO texto do valor ao lado da barra.

Pseudo-elementos ​

Pseudo-elementoDescrição
:::indeterminatePersonalizado, não faz parte do InstUI. Aplica-se apenas a um <progress> nativo que esteja sem o atributo value; anima .bar como um segmento deslizante e oculta .value.
::afterDesenha a linha inferior da trilha como sua própria camada sobre o medidor, de modo que a borda completa e a borda inferior permaneçam independentes entre temas.

Estados ​

EstadoDescrição
:indeterminate—

Propriedades personalizadas ​

PropriedadeTipoPadrãoDescrição
--max<number>—O valor máximo de progresso (padrão 100).
--min<number>—O valor mínimo do medidor (padrão 0).
--value<number>—O valor atual do progresso.
--value-max<number>—@alias {@link --max} O valor máximo de progresso (padrão 100).
--value-now<number>—@alias Alias para --value.

Animações ​

AnimaçãoDescrição
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>#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

Compatibilidade do navegador ​

  • Escopa as regras da parte do medidor com a at-rule @scope; navegadores sem suporte a @scope ignoram essas regras escopadas.

Relacionado ​