Countdown Animações

Contagem regressiva até uma data — desce, atualiza a cada segundo.

O que é

Mostra dias/horas/minutos/segundos restantes até uma data-alvo. É o irmão do Counter (que SOBE até um número) — este DESCE até uma data.

Como funciona

Um setInterval de 1s recalcula a diferença entre agora e a data-alvo. Formato, separador e rótulos de cada unidade são configuráveis; ao chegar a zero, aplica data-sw-done e opcionalmente troca o texto por sw-ani-complete.

Exemplos

Contagem até uma data Ao vivo

00:00:00:00

Atualiza a cada segundo, sozinho.

<div sw-ani="countdown" sw-ani-target="2027-01-01T00:00:00">00:00:00:00</div>

<!-- a data vai em formato ISO: AAAA-MM-DDThh:mm:ss -->

Quais unidades mostrar Ao vivo

dhms — completo00:00:00:00
hms — sem os dias00:00:00
ms — só minutos e segundos00:00

<div sw-ani="countdown" sw-ani-target="…" sw-ani-format="dhms">…</div>
<div sw-ani="countdown" sw-ani-target="…" sw-ani-format="hms">…</div>
<div sw-ani="countdown" sw-ani-target="…" sw-ani-format="ms">…</div>

Separador e rótulos próprios Ao vivo

padrão00:00:00:00
rótulos por extenso00 dias 00 horas

<div sw-ani="countdown"
     sw-ani-target="2027-01-01T00:00:00"
     sw-ani-separator=" "
     sw-ani-labels="dias,horas,min,seg">…</div>

<!-- os 4 rótulos, em ordem: dias, horas, minutos, segundos -->
<!-- separador padrão: ":" -->

Quando a data já passou Ao vivo

00:00:00:00

A data-alvo aqui é de 2020, então ele já mostra o texto de encerramento — é assim que fica quando a contagem zera.

<div sw-ani="countdown"
     sw-ani-target="2026-12-25T00:00:00"
     sw-ani-complete="A promoção encerrou!">00:00:00:00</div>

<!-- ao zerar, ele troca o texto E marca o elemento com [data-sw-done] -->
<style>
  [data-sw-done] { opacity: .6; text-decoration: line-through; }
</style>

Atributos

sw-ani-target

data-alvo, formato ISO (ex.: "2027-01-01T00:00:00")

sw-ani-format

unidades mostradas — padrão "dhms" (dias, horas, min, seg)

sw-ani-separator

texto entre as unidades — padrão ":"

sw-ani-labels

rótulos das 4 unidades, separados por vírgula — padrão "d,h,m,s"

sw-ani-complete

texto que substitui a contagem quando chega a zero

Variantes

sw-ani-format="dhms"

padrão — dias, horas, minutos e segundos

sw-ani-format="hms"

só horas, minutos e segundos

sw-ani-format="ms"

só minutos e segundos

[data-sw-done]

atributo que ele escreve no elemento quando a contagem zera — dá pra estilizar por CSS

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Precisa do pacote swcore.motion.min.css/js carregado (área de Animação).

Limitações — o que ele não faz

A conta usa o relógio do computador do visitante. Se ele estiver com a data errada, a contagem sai errada — pra promoção séria, confirme o prazo no servidor também.
A data vai em formato ISO (2027-01-01T00:00:00). Sem fuso explícito, vale o fuso do visitante.

← AnteriorRive Próximo →Counter