Progress and Seek Bar
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](/static/1721996594019.4783104017885/e5715/ui-controls-progress-bar-anatomy.png)
![seek bar anatomy](/static/1721996594019.4783104017888/e5715/ui-controls-seek-bar-anatomy.png)
- Container: The background of the Progress/Seek Bar. It includes a background color and radius properties.
- Track: A growing element whose size corresponds to the progression of an operation.
- Buffering indicator: An animating bar shown when the system is trying to play content but is not sufficiently buffered for smooth playback.
- Handle (seek bar): A draggable thumb that allows jumping to a specific moment of the currently playing audio.
Style
![style track](/static/1721996594019.4783104017887/e5715/ui-controls-progress-seek-bar-anatomy-style-track.png)
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](/static/1721996594019.4783104017886/e5715/ui-controls-progress-seek-bar-anatomy-style-buffering-indicator.png)
Usage
![usage example1 thumbnail](https://developer.tomtom.com/assets/downloads/tomtom-digital-cockpit/image-components/designers/design-system/ui-controls/progress-and-seek-bar/ui-controls-progress-seek-bar-usage-example1.png)
Mini player in Navigation
Progress bar showing the progress of the "Calming Moon" song.
![usage example2 thumbnail](https://developer.tomtom.com/assets/downloads/tomtom-digital-cockpit/image-components/designers/design-system/ui-controls/progress-and-seek-bar/ui-controls-progress-seek-bar-usage-example2.png)
Now playing view
Seek bar showing the progress of the "Calming Moon" song.
Customization
Type | Customizable |
---|---|
Theming | The sizing, styling, and radiuses of the container, track, handle, and buffering indicator can be adjusted. |
Configurations | - |
Content | - |