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
- 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
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.
Usage
Mini player in Navigation
Progress bar showing the progress of the "Calming Moon" song.
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 | - |