dile-timer

Web Component to show a countdown timer with an optional set of controls (start / pause / reset).

It emits events on every tick and when the countdown finishes so you can easily react from your application.

Installation

npm i @dile/ui

Usage

Import the component.

import '@dile/ui/components/timer/timer.js';

Use the component.

<dile-timer duration="60000"></dile-timer>

Properties

• duration: Number. Total duration in milliseconds. Default is 60000.
• remaining: Number. Remaining time in milliseconds. Reflected to attribute. Default is duration.
• running: Boolean. Whether the timer is running. Reflected to attribute.
• tick: Number. Tick interval in milliseconds (how often it updates and emits the tick event). Default is 250.
• autoStart: Boolean. If true, the timer starts automatically the first time duration changes.
• format: String. Time format. Supported values are "mm:ss" and "hh:mm:ss". Default is "mm:ss".
• title: String. Title displayed above the timer.
• subtitle: String. Subtitle displayed below the title.
• controls: Boolean. Displays the Start / Pause / Reset buttons.
• startText: String. Text for the start button (start-text). Default is "Start".
• pauseText: String. Text for the pause button (pause-text). Default is "Pause".
• resetText: String. Text for the reset button (reset-text). Default is "Reset".
• disabled: Boolean. Disables user interaction.

Methods

• start(): Starts the timer.
• pause(): Pauses the timer.
• reset(): Resets the timer to the initial duration.

Events

• dile-timer-tick: is dispatched on every tick and immediately after calling start(), pause() or reset().

  • detail.remaining: Remaining time in ms.
  • detail.duration: Total duration in ms.
  • detail.running: Whether the timer is running.

• dile-timer-finished: is dispatched when the timer reaches 0.

  • detail.duration: Total duration in ms.

CSS Custom Properties

Demos

Basic timer

<script type="module">
  import '@dile/ui/components/timer/timer.js';
</script>

<dile-timer duration="90000"></dile-timer>

Timer with controls

<script type="module">
  import '@dile/ui/components/timer/timer.js';
</script>

<dile-timer duration="120000" controls title="Break" subtitle="Take a short rest"></dile-timer>

Note: You can force the "hh:mm:ss" format using format="hh:mm:ss".

Listen to events

<script type="module">
  import '@dile/ui/components/timer/timer.js';

  window.addEventListener('DOMContentLoaded', () => {
    const timer = document.querySelector('dile-timer');
    timer.addEventListener('dile-timer-tick', (e) => {
      // e.detail.remaining
      // e.detail.running
    });
    timer.addEventListener('dile-timer-finished', (e) => {
      // e.detail.duration
    });
  });
</script>

<dile-timer duration="10000" controls></dile-timer>