@lgs1920/countdown v1.3.1

A configurable countdown Web Component

This interactive demo shows a countdown to a target date in days, hours, minutes, and seconds. Try different card appearances, flip or fade animations, translated labels, themes, colors, and responsive single-row rendering. Inspired by FlipClock.

Interactive playground

Tune the component

Default

Awesome

Shoelace

Light

Dark

Blue

Red

Orange

Green

Cyan

Purple

Pink

Filled

Outlined

Filled outlined

Plain

Flip

Fade

English

Français

Español

Deutsch

Norsk

Show unit labels

Show all digits

Hide seconds

Live playground

Max is 999 days - 23:59:59

target-date + 2 days

Reference examples

Compare appearances and transitions

Filled outlined · flip

Recommended default with an opaque themed surface, standard Web Awesome border, and a two-digit day value.

Filled · fade

A solid card treatment with no days displayed and the same 650 ms transition duration.

Outlined · automatic fade

Outlined cards never use a rotor, even when flip is requested.

Plain · automatic fade

Plain cards have no background or border and always use fade.

All units · show all digits

All four units stay visible, including zero-valued days and hours.

All units · default digits

The same target with show-all-digits disabled hides unused Days and Hours units.

Even day count · 124 days

A two-digit even day value keeps all four units visible for comparison.

Hours · minutes only

The no-seconds option removes Seconds while Minutes remains visible.