Progress Bar

A simple horizontal progress bar. It shows playback progress and lets users seek by clicking or using arrow keys. This is the most minimal visualization option.

Basic usage

Link it to a recording element using the for attribute.

HTML

<fortyfour-recording
  id="rec"
  recording-id="YOUR_RECORDING_ID"
  preload="metadata"
></fortyfour-recording>

<fortyfour-progress-bar for="rec"></fortyfour-progress-bar>

The bar fills from left to right as the recording plays. Users can click anywhere on the bar to seek to that position.

Customizing the bar

Control the size and shape with attributes.

HTML

<fortyfour-progress-bar
  for="rec"
  bar-height="6"
  bar-radius="3"
></fortyfour-progress-bar>

Attribute	Type	Default	Description
`bar-height`	number	`4`	Height of the bar in pixels
`bar-radius`	number	`2`	Border radius of the bar in pixels

Colors

Set the progress and track colors with CSS variables.

CSS

fortyfour-progress-bar {
  --progress-bar-progress-color: #c4956a;
  --progress-bar-track-color: #e5e7eb;
}

The progress color fills the portion that has already played. The track color fills the portion that has not played yet.

Keyboard support

When the progress bar has focus, use arrow keys to seek through the recording.

Key	Action
Left arrow	Seek backward
Right arrow	Seek forward

Reference

Attributes

Attribute	Type	Default	Description
`for`	string	required	ID of the `<fortyfour-recording>` to link to
`bar-height`	number	`4`	Height of the bar in pixels
`bar-radius`	number	`2`	Border radius of the bar in pixels

CSS Variables

Variable	Default	Description
`--progress-bar-progress-color`	`#3b82f6`	Color of played portion
`--progress-bar-track-color`	`#e5e7eb`	Color of unplayed portion
`--progress-bar-focus-color`	`#3b82f6`	Focus ring color
`--progress-bar-focus-width`	`2px`	Focus ring width
`--progress-bar-focus-offset`	`2px`	Focus ring offset
`--progress-bar-focus-radius`	`4px`	Focus ring border radius