When I facilitate meetings virtually I tend to use a lot of visual components to keep track of things. Using a basic timer while sharing screens or my browser window has been handy on a number of occasions.

I used to use a basic web search timer, and then migrated to an internal team created timer some time later. When I left that job I missed the timer and the functionality. It was pretty simple though so I decided to recreate something similar.

This basic timer exists only as a browser page and takes in arguments via the URL arguments.

Live Timer (change the URL parameters above to see)

URL Parameters

duration - The length in seconds the timer should run for.
msg - The message that is displayed when the timer is complete.

Quick Links to common durations (blog distraction free)

Behind the scenes for interested folks (Spoiler: web component + Ghost CMS)

If you want to copy something like this, you could copy the relevant JS files to your Ghost instance and embed them as a web component like in this page via something like the following:

Add to your Post header `{{ghost_head}}`

<script type="module">
  import ProgressTimer from '/assets/js/components/ProgressTimer.js';

  if (!customElements.get('progress-timer')) {
    customElements.define('progress-timer', ProgressTimer)
  }
</script>

Post/Page HTML Section

Examples

<progress-timer progress="75" gutter-stroke="2" stroke="10" label="0:45"></progress-timer>

<progress-timer progress="25" gutter-stroke="10" stroke="4" radius="50" label="04:21:00"></progress-timer>