Countdown Animações

O que é

Mostra quanto tempo falta até uma data e hora: o lançamento, o fim da promoção, o dia do evento. Atualiza sozinho a cada segundo. Você escolhe quais partes aparecem (dias, horas, minutos, segundos), o que vai entre elas e o nome de cada uma. Quando chega a zero, pode trocar por uma frase ("A promoção encerrou!").

Você informa a data-alvo em sw-ani-target, no formato AAAA-MM-DDThh:mm:ss. O texto que você escrever dentro do elemento aparece só até o SW Core assumir (e fica para quem não tem JavaScript). O resultado padrão é assim: 98d:04h:05m:06s — cada número com a sua letra, separados por dois-pontos. Os dias só aparecem enquanto faltar pelo menos 1 dia.

Quando usar

• Promoção com prazo (Black Friday, cupom que expira): cria urgência.
• Lançamento de produto, curso ou site: "abre em…".
• Evento (casamento, show, formatura): "faltam X dias".
• Para número que sobe até um valor ("+15.000 clientes"), o componente é o Counter.

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação (o swcore.motion.min.js vem antes do swcore.min.js).

   <!-- no <head> -->
   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- no fim do <body>: o motion ANTES do swcore -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Coloque sw-ani="countdown" e a data. Ele já começa a contar.

   contando…

   <span sw-ani="countdown" sw-ani-target="2027-01-01T00:00:00">contando…</span>

3. 3

   Mais legível: espaço entre as partes e nomes por extenso.

   contando…

   <span sw-ani="countdown" sw-ani-target="2027-01-01T00:00:00"
         sw-ani-separator=" · " sw-ani-labels=" dias, h, min, s">contando…</span>

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 class="bg-g-err p-3 flx alc j-ct gap-3 f-wr">
  <strong>BLACK FRIDAY — 40% OFF</strong>
  <span>termina em</span>
  <span sw-ani="countdown" sw-ani-target="2026-11-27T23:59:59-03:00"
        sw-ani-separator=" " sw-ani-complete="Promoção encerrada">…</span>
</div>

<span id="cupom" sw-ani="countdown" sw-ani-format="ms" sw-ani-separator=" "
      sw-ani-complete="Cupom expirado">15m 00s</span>

<script>
  // a data-alvo é "agora + 15 minutos" — o script vem ANTES do swcore.motion.min.js
  document.getElementById('cupom')
    .setAttribute('sw-ani-target', new Date(Date.now() + 15 * 60 * 1000).toISOString());
</script>

<style>
  .cd-evento[data-sw-done] { opacity: .55; text-decoration: line-through; }
</style>

<span sw-ani="countdown" sw-ani-target="2027-06-20T19:00:00-03:00"
      sw-ani-format="dhm" sw-ani-separator="   "
      sw-ani-labels=" dias, horas, minutos, s" class="cd-evento">…</span>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js (já traz o GSAP) e swcore.motion.min.css, antes do swcore.min.js.

Cuidados — erros comuns

• Data em formato brasileiro (27/11/2026) não é entendida: o console avisa "data-sw-target inválido". Use 2026-11-27T23:59:59.
• Sem fuso no fim da data, vale o horário do computador de quem visita. Para uma promoção que acaba às 23:59 de Brasília para todo mundo, acrescente -03:00.

O que ele não faz

• A conta usa o relógio do aparelho de quem visita. Relógio errado = contagem errada. Em promoção séria, confira o prazo também no servidor.
• Não dispara evento JavaScript quando zera. Para reagir ao fim, use a frase (sw-ani-complete) ou o atributo data-sw-done no CSS.