Countdown
`<pura-countdown>` counts down to a target moment (an ISO date via `to`) or for a duration in seconds (`seconds`), updating every second and firing `tick` and, when it reaches zero, `complete`. Use it for limited-time offers, launches, deadlines, or "coming soon" pages, with a segmented or compact display. Agent-native layer: on every tick it mirrors its live state in stable `data-pura-countdown-*` attributes (remaining, days, hours, minutes, seconds, target, complete) and registers itself in `window.__puraCountdowns` by its `data-pura-id`, letting an agent read or enumerate every timer on the page without digging through the DOM.
Preview
<pura-countdown to="2026-12-31T23:59:59Z" pad-days>
<span slot="complete">Offer ended!</span>
</pura-countdown>
<!-- Compact variant from a duration -->
<pura-countdown seconds="3600" compact></pura-countdown>
<!-- Programmatic control: start() / pause() / reset() -->
<script type="module">
import "/pura/lib/countdown.js";
const cd = document.querySelector("pura-countdown");
cd.addEventListener("complete", () => console.log("done"));
cd.addEventListener("tick", (e) => console.log(e.detail.total));
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
to | string | — | Target moment as an ISO datetime (e.g., "2026-12-31T23:59:59Z"). Takes priority over seconds. |
seconds | number | — | Duration in seconds from the moment of connection. An alternative to to; ignored when to is present. |
compact | boolean | false | Displays on a single compact line ("1d 02:03:04") instead of separate segments. |
no-labels | boolean | false | Hides the unit captions under each segment (segmented mode). |
pad-days | boolean | false | Pads the days value with a leading zero up to 2 digits. |
running | boolean | false | Reflected and read-only: present while the timer is running. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/countdown.js"></script>import "./pura/lib/countdown.js";