Progress [sw-prg]
Barra de progresso linear e circular, com variantes de cor, tamanho e listras animadas.
1. Linear — Tamanhos
2. Cores & Rótulo
Upload72%
3. Listrado & Animado
4. Circular
72%
45%
5. Circular Animado (role a tela até aqui)
Com sw-prg-animate, o anel preenche do 0 até o valor real — e o número conta junto — assim que entra na tela. Role a página pra ver de novo.
0%
0%
0%
0%
6. Anel — Gradiente, Glow e Espessura
0%
0%
0%
0%
Referência
| Classe/Atributo | Tipo | Descrição |
|---|---|---|
[sw-prg] | Base | Trilho da barra linear. |
.sw-prg-bar | Elemento | Preenchimento — controle a largura via style="width:N%". |
.sw-prg-pp, .sw-prg-g | Tamanho | Fino ou grosso. Sem classe = padrão. |
.is-suc, .is-ale, .is-err | Cor | Na barra ou no anel — muda a cor do preenchimento. |
.sw-prg-strp, .sw-prg-anim | Estilo | Listras diagonais, opcionalmente animadas (barra linear). |
[sw-prg-circ] | Base | Progresso circular via --sw-prg-val (0-100) e --sw-prg-sz (diâmetro). |
sw-prg-animate | Comportamento | Anima do 0 até --sw-prg-val ao entrar na tela, com contagem do número. |
sw-prg-duration | Opção | Duração da animação em ms (padrão 1400). |
sw-prg-suffix | Opção | Sufixo do número contado (padrão "%"). |
.is-grad | Estilo | Anel com gradiente entre cor primária e secundária. |
.is-glow | Estilo | Brilho ao redor do anel, na cor ativa. |
.is-thin, .is-thick | Estilo | Espessura do traço do anel. |