CSS Element

Progress Bar [y2progr]

Barras de progresso com cores, tamanhos, animação striped e valores dinâmicos via CSS variable.

1. Básico

2. Tamanhos

PP (2px)

P (4px)

M (Normal - 8px)

G (16px)

GG (24px)

XG (32px)

3. Com Label / Valor

Upload 73%
HTML 95%
React 62%

4. Striped & Animado

Striped

Striped + Animado

Indeterminado

5. Multi-barra

6. Pill (bordas totalmente arredondadas)

7. Atualizar via JavaScript

Progresso 0% 
function setProgress(value) {
  const bar = document.querySelector('.y2progr-bar');
  bar.style.setProperty('--prg-v', value + '%');
}

Quick Reference

Atributo/Classe Aplica em Descrição
[y2progr] Container Atributo do container da barra de progresso.
.y2progr-bar Barra Elemento de preenchimento interno.
--prg-v Barra CSS variable com o percentual de preenchimento (ex: style="--prg-v:70%").
.is-pri, .is-sec, .is-suc, .is-ale, .is-err, .is-inf Barra Variantes de cor.
.is-pp, .is-p, .is-m, .is-g, .is-gg, .is-xg Container Espessura da trilha: PP (2px) ? XG (32px). Padrão = 8px.
.is-pil Container Bordas totalmente arredondadas no container e na barra.
.is-str Barra Padrão striped (listras diagonais).
.is-ani Barra Anima as stripes - requer .is-str.
.is-ind Barra Indeterminado - animação de varredura sem valor fixo.