@kumdotdev/countdown-timer

Countdown Timer Web Component

Vanilla JS one-file Web Component dependency free and framework agnostic. No build required. Use it as is.

Demo

Visit the demo page for usage examples.

Install

npm i @kumdotdev/countdown-timer

Import

CDN

<script async type="module" src="https://unpkg.com/@kumdotdev/countdown-timer/countdown-timer.js"></script>

Local install

<script async type="module" src="/node_modules/@kumdotdev/countdown-timer/countdown-timer.js"></script>

Import as module

<script type="module">
  import '/node_modules/@kumdotdev/countdown-timer/countdown-timer.js';
  // ...
</script>

Usage

Use ISO 8601 date format to provide the desired enddate!

The shorter version 2024-01-01T23:42 should work also.

<countdown-timer 
  date="2024-01-01T23:42:00.000+01:00">
</countdown-timer>

Language support

English, French and German provided. You can add more languages to L10N constant. Defaults to english language.

Attributes

Attribute	Description
alarm	[Optional] Time left in seconds to begin with pulsating the timer
date	ISO 8601 date for desired countdown target date

Styling

CSS-Variable	Description or additional info	Default
--cdt-digit-font-size	Size of the timer digits. Use inherit to inherit from parent element's font-size	2rem
--cdt-digit-font-family	On the demo page the counter used monospace family	inherit
normal--cdt-digit-font-weight	Another useful values could be 400 (normal)	700
--cdt-digit-text-color		#fefefe
--cdt-digit-box-color	You can set the box color to transparent to omit the colored digit box	#111
--cdt-label-font-size	The font size of the label beneath the digits	0.75rem