Progress no SWCore — documentação e exemplos

O que é

Mostra o preenchimento de algo — armazenamento usado, conclusão de uma tarefa, porcentagem de qualquer métrica.

Como funciona

A barra linear é só CSS (largura via style). O anel circular usa conic-gradient + @property --sw-prg-val (registra a variável como número animável) e um IntersectionObserver que dispara a contagem de 0 até o valor real só quando o elemento entra na tela.

Exemplos

Linear — Tamanhos Ao vivo

<div sw-prg>
  <div class="sw-prg-bar" style="width:65%"></div>
</div>
<!-- Tamanhos: sw-prg-pp (fino) | padrão | sw-prg-g (grosso) -->

Cores & rótulo Ao vivo

Upload72%

<div class="sw-prg-lbl"><span>Upload</span><span>72%</span></div>
<div sw-prg><div class="sw-prg-bar" style="width:72%"></div></div>
<!-- Cores: sw-prg-bar (padrão) | is-suc | is-ale | is-err -->

Listrado & animado Ao vivo

<div sw-prg class="sw-prg-strp sw-prg-anim">
  <div class="sw-prg-bar" style="width:60%"></div>
</div>

Circular Ao vivo

72%

45%

<div sw-prg-circ style="--sw-prg-val:72"><span>72%</span></div>
<!-- --sw-prg-val: 0-100 · --sw-prg-sz: diâmetro (padrão 8rem) -->

Circular animado (role a tela até aqui) Ao vivo

0%

0/5

0%

<div sw-prg-circ sw-prg-animate style="--sw-prg-val:72"><span>0%</span></div>
<!-- sw-prg-duration="1400" (ms) · sw-prg-suffix="%" (troque ou remova o sufixo) -->

Anel — Gradiente, Glow e Espessura Ao vivo

0%

<div sw-prg-circ sw-prg-animate class="is-grad" style="--sw-prg-val:80"><span>0%</span></div>
<div sw-prg-circ sw-prg-animate class="is-suc is-glow" style="--sw-prg-val:88"><span>0%</span></div>
<div sw-prg-circ sw-prg-animate class="is-thin" style="--sw-prg-val:65"><span>0%</span></div>
<div sw-prg-circ sw-prg-animate class="is-thick is-ale" style="--sw-prg-val:40"><span>0%</span></div>

Atributos

sw-prg-animate

no anel — ativa a animação de entrada (senão fica estático no valor definido)

sw-prg-suffix

sufixo do número (padrão "%")

sw-prg-duration

duração da contagem em ms

--sw-prg-sz

no anel — diâmetro (padrão 8rem)

Variantes

sw-prg-pp / sw-prg-g (na barra)

fino ou grosso — sem classe = padrão

sw-prg-strp / sw-prg-anim (na barra)

listras diagonais, opcionalmente animadas

is-suc / is-ale / is-err (barra ou anel)

cor de sucesso/alerta/erro em vez da primária

is-grad (no anel)

anel com gradiente entre a cor primária e a secundária

is-glow (no anel)

brilho ao redor do anel, na cor ativa

is-thin / is-thick (no anel)

espessura do traço do anel

Eventos

Nenhum.

API (JavaScript)