Progress and Seek Bar

Last edit: 2023.08.07

Progress Bar is a non-interactive graphical control element used to visualize the progression of an operation, such as a download, installation, or current location in the duration of a media file.

Seek Bar is an extension of the progress bar that adds a draggable thumb that users can interact with to set the progress level.

Anatomy

progress bar anatomy seek bar anatomy
  1. Container: The background of the Progress/Seek Bar. It includes a background color and radius properties.
  2. Track: A growing element whose size corresponds to the progression of an operation.
  3. Buffering indicator: An animating bar shown when the system is trying to play content but is not sufficiently buffered for smooth playback.
  4. Handle (seek bar): A draggable thumb that allows jumping to a specific moment of the currently playing audio.

Style

style track

The buffering indicator animates from right to left, growing to 50% of the total width of the progress/seek bar, then shrinking by 20% over the course of the animation.

style buffering indicator

Usage

usage example1 thumbnail

Mini player in Navigation

Progress bar showing the progress of the "Calming Moon" song.

usage example2 thumbnail

Now playing view

Seek bar showing the progress of the "Calming Moon" song.

Customization

TypeCustomizable
ThemingThe sizing, styling, and radiuses of the container, track, handle, and buffering indicator can be adjusted.
Configurations-
Content-