Time Tracker

<wa-time-tracker>

Experimental

added

Tracks elapsed time as a stopwatch or remaining time as a countdown.

Duration

<wa-time-tracker>
  <span slot="label">Duration</span>
</wa-time-tracker>

Examples

Link to This Section

Countdown

Link to This Section

Use mode="timer" and provide a duration in seconds.

Time remaining

<wa-time-tracker mode="timer" duration="60">
  <span slot="label">Time remaining</span>
</wa-time-tracker>

Auto start

Link to This Section

auto-start begins tracking when the component connects. A supplied value alone does not start it.

Elapsed time

<wa-time-tracker value="60" auto-start>
  <span slot="label">Elapsed time</span>
</wa-time-tracker>

Control with JavaScript

Link to This Section

stop() preserves the current value so tracking can resume. Use reset() to restore zero for a stopwatch or duration for a countdown.

  Working time

  Start
  Stop
  Reset

<wa-time-tracker id="controlled-tracker">
  <span slot="label">Working time</span>
</wa-time-tracker>

<div class="wa-cluster wa-gap-xs" style="margin-block-start: var(--wa-space-s);">
  <wa-button id="start-tracker" size="s">Start</wa-button>
  <wa-button id="stop-tracker" size="s">Stop</wa-button>
  <wa-button id="reset-tracker" size="s">Reset</wa-button>
</div>

<script>
  const tracker = document.querySelector('#controlled-tracker');
  document.querySelector('#start-tracker').addEventListener('click', () => tracker.start());
  document.querySelector('#stop-tracker').addEventListener('click', () => tracker.stop());
  document.querySelector('#reset-tracker').addEventListener('click', () => tracker.reset());
</script>

Custom control

Link to This Section

Replace the default control with the control slot. Listen for lifecycle events or inspect running to synchronize it.

  Working time
  Start or stop

<wa-time-tracker id="custom-control-tracker">
  <span slot="label">Working time</span>
  <wa-button slot="control" size="s">Start or stop</wa-button>
</wa-time-tracker>

<script>
  const tracker = document.querySelector('#custom-control-tracker');
  const control = tracker.querySelector('[slot="control"]');
  control.addEventListener('click', () => (tracker.running ? tracker.stop() : tracker.start()));
</script>

Completion

Link to This Section

wa-complete fires when a timer reaches zero or a limited stopwatch reaches its duration.

tracker.addEventListener('wa-complete', () => {
  console.log('Tracking complete', tracker.value);
});

Notes

Link to This Section

duration="0" leaves a stopwatch unlimited. A countdown requires a positive duration or value.
Use interval to change how often the display refreshes; it does not change elapsed time.
Provide start-label, stop-label, and time-label when localized accessible labels are required.
The component exposes :state(running) for state-dependent styling.

API

Link to This Section

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/time-tracker/time-tracker.js';

After installing Web Awesome via npm, import this component:

import '@yoummday/webawesome/dist/components/time-tracker/time-tracker.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/time-tracker/time-tracker.js';

To import this component for React 18 or below, use the following code:

import WaTimeTracker from '@yoummday/webawesome/dist/react/time-tracker/index.js';

Slots

Link to This Section

Learn more about using slots.

Name	Description
`control`	Replaces the default start and stop control.
`label`	An optional label shown before the time.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`autoStart` `auto-start`	Starts tracking when the component connects. Type `boolean` Default `false`
`disabled` `disabled`	Prevents the default control and `start()` method from starting the tracker. Type `boolean` Default `false`
`duration` `duration`	The countdown length or optional stopwatch limit, in seconds. A value of zero leaves a stopwatch unlimited. Type `number` Default `0`
`interval` `interval`	How often the displayed value is refreshed, in milliseconds. Elapsed time remains based on the system clock. Type `number` Default `1000`
`mode` `mode`	Whether the tracker counts elapsed time up or remaining time down. Type `TimeTrackerMode` Default `'stopwatch'`
`running`	Whether the tracker is currently running.
`startLabel` `start-label`	Accessible label for the default start control. Type `string` Default `'Start'`
`stopLabel` `stop-label`	Accessible label for the default stop control. Type `string` Default `'Stop'`
`timeLabel` `time-label`	Accessible label for the time display. Defaults to a label based on `mode`. Type `string` Default `''`
`value` `value`	The current elapsed or remaining time, in seconds. Type `number \| undefined`

Methods

Link to This Section

Learn more about methods.

Name	Description	Arguments
`reset()`	Stops tracking and restores zero for a stopwatch or `duration` for a countdown.
`start()`	Starts or resumes tracking from the current value.
`stop()`	Stops tracking and preserves the current value.

Events

Link to This Section

Learn more about events.

Name	Description
`wa-complete`	Emitted when a countdown reaches zero or a stopwatch reaches its duration.
`wa-start`	Emitted when tracking starts.
`wa-stop`	Emitted when tracking stops, including when the configured duration completes.

Custom States

Link to This Section

Learn more about custom states.

Name	Description	CSS selector
`running`	Applied while the tracker is running.	`:state(running)`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`control-button`	The default start and stop button.	`::part(control-button)`
`controls`	The control container.	`::part(controls)`
`label`	The label container.	`::part(label)`
`time`	The formatted time display.	`::part(time)`
`time-tracker`	The component's outer wrapper.	`::part(time-tracker)`
`base`	An alias for the component's outer wrapper.	`::part(base)`

Dependencies

Link to This Section

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand?

Report a bug

Ask for help

Time Tracker

Examples

Countdown

Auto start

Control with JavaScript

Custom control

Completion

Notes

API

Importing

Slots

Attributes & Properties

Methods

Events

Custom States

CSS Parts

Dependencies

Quick Links

Recent Searches