UI: Components

Countdown

Countdown is a component that displays the time remaining until a specific event.
Uses CSS @property-animations to avoid DOM-manipulation.
Specify end-date in data-time-attribute, example: data-time="2024-12-31".

  1. days
  2. hours
  3. minutes
  4. seconds

With opposite color-scheme

  1. days
  2. hours
  3. minutes
  4. seconds

With right-to-left

… and custom language, using lang="ar-AE".
Since this is using @property-animations with <integer> as type, numerals can not be localized.

  1. أيام
  2. ساعات
  3. دقائق
  4. ثوانٍ