wc-countdown
v0.1.2
Published
A reusable web component that displays a countdown timer with support for days, hours, minutes, and seconds. The component automatically parses duration strings and updates in real-time.
Maintainers
remogattoReadme
Countdown Timer Web Component
A web component that displays a countdown timer with support for days, hours, minutes, and seconds. The component automatically parses duration strings and updates in real-time.
Features
- Automatic parsing of duration strings (e.g., "1d 2h 30m 45s")
- Real-time updates every second
- Optional disabled element that enables when countdown completes
- Optional server syncronization using Server Sent Events
Usage
To use the CountDown component in your HTML page:
- Include the definition script in your project and ensure it's loaded before you use the custom element.
- Add a
<count-down>tag to your HTML with the necessary attributes and inner elements for functionality.
Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Countdown Timer</title>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/countdown.min.js"></script>
</head>
<body>
<count-down>
<p countdown>Time remaining until launch: 12s seconds</p>
<button aria-busy="true" aria-label="Please wait…" replace disabled>Please wait…</button>
<button hidden>Launch! 🚀</button>
</count-down>
</body>
</html>Customization
You can customize which elements are controlled by the countdown using different selectors:
[countdown]: Element where the initial and current countdown times are displayed.[disabled]: Elements that will be disabled while the countdown is active.[hidden]&[replace]: Elements for controlling visibility of content after the countdown completes.
Source code
You can explore the source code here.