Duration

Overview

Formats a given duration in milliseconds based on various additional hints, such that its appearance becomes aligned with the desired scheme.

<duration

  value: number

  ↪ Duration in milliseconds

  units: string

  ↪ Units to format the duration into; available units:

  ↪ i: milliseconds

  ↪ s: seconds

  ↪ m: minutes

  ↪ h: hours

  ↪ d: days

  ↪ M: months

  ↪ y: years

  unit-renderer: markup(null)

  ↪ Renderer called for each displayed unit; introduces:

  ↪ - value: Long

  ↪ - unit: String (e.g. "i", "s", etc.)

  separator: markup(null)

  ↪ Separator in-between units

  zeroes: string(false)

  ↪ Whether to show units of value zero

/>

Examples

Default Style

When just supplying a value as well as some units to format into, the default style will be plain but efficient:

Code-Blocks are only available within the browser

Custom Style

As to really show what's possible, let's not just render different unit-suffixes, but also account for singular/plural differentiation, color groups based on their unit and add a colored separator.

Code-Blocks are only available within the browser