shadcn.io is not affiliated with official shadcn/ui
Progress Ring Music Streaming Navbar Block for Vue
A navbar for a music streaming service: three links, then a mini player with Play inside a ring that fills as the track goes, Previous and Next, a marquee for long titles and equalizer bars that stop at rest.
Installation
Overview
A navbar for a music service in Vue with Ark UI. The wordmark of Songwick leads and Browse, Library and Playlists follow, the current page marked by a foreground stroke on the bar's bottom edge. A hairline divides them from a mini player: Play sits inside a ring that fills as the track goes, with Previous and Next on either side, then the track and artist and four equalizer bars. Pressing Play starts a one-second tick that fills the ring, moves on to the next track when the preview ends and stops after the last; a title too long for its box crawls as a marquee, but only while playing. Nothing actually plays: the three tracks are 30-second previews held in state, so the ring visibly fills. The Go ad-free Shine Button closes the row. On a phone the player is the ring alone and the links fold into a sheet from the top. It's built from Circular Progress, Toggle, Marquee, Button, Tooltip, Sheet, Shine Button and Guides. For audio products that keep a player in the page's chrome.
FAQ
Does it really play audio?
No. It is the control, not a player: the position is a number in state that a one-second setInterval raises while Play is pressed, and the tick stops as soon as it is released. There is no audio element. To wire it to one, call play() and pause() from toggle and set position from the element's timeupdate.
How does the ring work, and what does a screen reader hear?
The ring is Circular Progress drawn in the foreground tone, filled to the share of the current track played. It is decoration: the button's own name is "Play" and it is pressed while playing (its icon turns to Pause); Previous and Next have tooltips. A hidden status region, empty until your first press, says "Playing: Low Tide Radio, Hollow Reed" or "Paused: …" whenever the track or the state changes, so it speaks when a preview ends and the next one starts, and never once a second.
What moves, and what happens under reduced motion?
Only while a track plays: the ring (a steady one-second step), the four equalizer bars and, for a title that doesn't fit, the marquee. At rest nothing moves. Under reduced motion the ring steps without a transition, the bars hold one height and the marquee is replaced by plain text with an ellipsis. Pausing stops all three at once.
When does the title crawl?
The text is measured against its box (on load and on resize). If it fits, it is plain text. If it doesn't, it stays truncated at rest and becomes a marquee while playing. The second preview ("A Long Way Down the Lantern Road") does; try it.
What do Previous and Next do?
Next goes to the next preview and wraps round after the last. Previous restarts the current preview if it has played more than three seconds, and otherwise goes back one. When the last preview ends, the player pauses and returns to the start. Change TRACKS, LENGTH and START at the top of the file to use your own.
How does it work on a phone?
Below sm the divider, Previous and Next go and the ring with Play stays beside the wordmark; below md the track line and bars are hidden. A menu button opens a sheet from the top with the three links and the Go ad-free button; below lg that button is in the sheet. Choosing a link closes it.