1822

Quartr Chapter Progress Fill Interaction

Quartr Chapter Progress Fill Interaction

In the Quartr app, tapping the Chapters button reveals a bottom sheet containing a list of audio chapters. The currently playing chapter is highlighted with a horizontal progress fill that moves from left to right across the row's background, matching the audio playback. When the user taps a different chapter, the playback instantly jumps, resetting the progress fill on the previous item and initiating it on the new active row. This combines list navigation with micro-progress tracking directly within the list item container.