← All elements
<div class="mp"><div class="art"><i></i><i></i><i></i><i></i></div><b>Midnight Drive</b><span>Neon Harbor</span><div class="tr"><u></u></div><div class="ct"><s></s><p></p><s></s></div></div>About this card
A compact now-playing card with cover art, animated bars, a progress track and drawn transport controls.
How it works
The cover art holds four bars that animate their height between 16px and 70px with different delays, giving an equaliser feel. Controls are drawn with borders for the triangles and two small rectangles for the pause icon, and the progress bar is a fixed 42 percent fill.
Ways to customise it
- Change the progress width.
- Add more bars for a wider equaliser.
- Recolour with the pink and purple gradient.
Good to know
Moving bars stop under reduced motion. In a working player, use real buttons with labels for previous, play and next.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.