Progress Componentes

O que é

Serve para a pessoa ver o andamento: "Enviando 72%", "Perfil 80% completo", "Meta do mês: 64%". São duas formas: a barra (sw-prg com uma sw-prg-bar dentro) e o anel (sw-prg-circ). Espessura, cor, listras, brilho e degradê se escolhem com palavras no atributo, como no botão.

O visual da barra e do anel é CSS. O valor (0 a 100) vai no atributo sw-prg-val="72" — na barra ele vira a largura do preenchimento, no anel vira o traço. Para atualizar, troque o atributo pelo JavaScript (setAttribute('sw-prg-val', 80)) e a barra anda suavemente sozinha. O atributo e a contagem animada do anel (sw-prg-animate) precisam do swcore.min.js. Sem JS, o jeito antigo continua valendo: style="width:72%" na barra e style="--sw-prg-val:72" no anel.

Quando usar

• Envio de arquivo ou tarefa em andamento: barra, atualizada pelo JavaScript.
• "Seu perfil está 80% completo": barra com rótulo (sw-prg-lbl).
• Números de painel (meta do mês, ocupação, satisfação): anel.
• Página de "números da empresa" que anima quando a pessoa rola até ela: anel com sw-prg-animate.
• Para a barra fina de progresso de leitura no topo da página, use sw-progresso.

Comece aqui

1. 1

   Coloque o SWCore na página (CSS no head, JS no fim do body — o JS lê o sw-prg-val).

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Barra: a caixa sw-prg e o preenchimento sw-prg-bar, com o valor em sw-prg-val.

   Enviando fotos72%

   <div sw-prg-lbl><span>Enviando fotos</span><span>72%</span></div>
   <div sw-prg><div sw-prg-bar sw-prg-val="72"></div></div>

3. 3

   Anel: sw-prg-circ com o valor em sw-prg-val (0 a 100) e o texto do meio num <span>.

   72%

   <div sw-prg-circ sw-prg-val="72"><span>72%</span></div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div sw-prg-lbl><span>proposta-comercial.pdf</span><span id="envio-txt">0%</span></div>
<div sw-prg="g"><div sw-prg-bar id="envio-bar" sw-prg-val="0"></div></div>

<script>
  const barra = document.getElementById('envio-bar');
  const texto = document.getElementById('envio-txt');

  function atualizar(pct) {            // chame com o progresso real (0 a 100)
    barra.setAttribute('sw-prg-val', pct);
    texto.textContent = pct + '%';
    if (pct === 100) {
      barra.setAttribute('sw-prg-bar', 'suc');   // fica verde no fim
      texto.textContent = 'Enviado';
    }
  }
</script>

<div class="bg-sur bd r-m p-3 flx f-cl gap-2">
  <div sw-prg-lbl><span>Perfil da loja</span><span>80%</span></div>
  <div sw-prg><div sw-prg-bar="suc" sw-prg-val="80"></div></div>
  <a href="/perfil/logo" sw-btn="ghost p">Falta adicionar o logotipo</a>
</div>

<div class="flx gap-6 f-wr j-ct t-ct">
  <div class="flx f-cl alc gap-2"><div sw-prg-circ="grad glow" sw-prg-animate sw-prg-val="64"><span>0%</span></div><span class="t-mut">Vendas</span></div>
  <div class="flx f-cl alc gap-2"><div sw-prg-circ="suc" sw-prg-animate sw-prg-val="91"><span>0%</span></div><span class="t-mut">Satisfação</span></div>
  <div class="flx f-cl alc gap-2"><div sw-prg-circ="ale" sw-prg-animate sw-prg-val="38"><span>0%</span></div><span class="t-mut">Novos clientes</span></div>
</div>

<div sw-prg-lbl><span>Etapa 2 de 4 — Entrega</span><span>50%</span></div>
<div sw-prg="pp"><div sw-prg-bar sw-prg-val="50"></div></div>

API (JavaScript)

Precisa de quê

• swcore.min.css — barra e anel.
• swcore.min.js — para sw-prg-val e sw-prg-animate.

Cuidados — erros comuns

• Colocar o valor na palavra do atributo (sw-prg="72") não funciona: o valor tem atributo próprio, sw-prg-val="72", no sw-prg-bar ou no sw-prg-circ.
• Escrever --sw-prg-val:72%: o anel some. É número puro, sem "%".
• Pôr a cor na caixa (sw-prg="suc"): não pinta. A cor vai na barra de dentro: sw-prg-bar="suc".
• Barra dentro de uma linha flx sem largura: ela encolhe até sumir. Dê largura ao pai (ex.: w-fl ou f-1).
• Usar sw-prg-animate num anel que você atualiza pelo JavaScript: a contagem é feita para rodar uma vez, na entrada. Para valores que mudam, deixe sem sw-prg-animate.

O que ele não faz

• Não acompanha nada sozinho: quem diz o progresso é você, atualizando o sw-prg-val.
• O texto do meio do anel não é gerado na primeira vez: sem sw-prg-animate, escreva você o número no <span> (depois, trocar o sw-prg-val atualiza o número).
• Não tem modo "sem valor definido" (barra correndo sem parar para tempo desconhecido). O mais perto é sw-prg="strp anim" com a barra em 100%.