Click Clock
Countdown timer, stopwatch, and real-time clock in multiple formats.
Countdown Timer
Countdown from a specified number of seconds.
<click-clock time="90"></click-clock>
Stopwatch
Count up from zero.
<click-clock mode="stopwatch" show-milliseconds></click-clock>
Live Clock
Display current time.
<click-clock mode="clock" autostart hide-days></click-clock>
Target Date Countdown
Countdown to a specific date and time.
<click-clock target="2025-12-31T00:00:00" autostart></click-clock>
Full Format
Show unit labels below values.
<click-clock time="3665" format="full" autostart></click-clock>
Compact Format
No labels, just values.
<click-clock time="3665" format="compact" separator=" : "></click-clock>
Custom Styling
Use CSS custom properties for theming.
<click-clock
time="120"
style="--clock-font-size: 3rem; --clock-color: #8b5cf6;"
></click-clock>
Events
Listen for timer events.
Events will appear here...
clock.addEventListener('complete', () => {
console.log('Timer finished!');
});
Minutes Only
Show only minutes for short timers.
<click-clock time="180" hide-days hide-hours hide-seconds autostart></click-clock>