Mini Player Bars

Mini player with play/pause that starts/stops an equalizer.

Static WavesNeddev FM

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Mini Player Bars · Bron: CodeShack · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="abp-card"><button class="abp-btn" aria-label="play"><span class="abp-ico abp-play"></span></button><div class="abp-meta"><b>Static Waves</b><small>Neddev FM</small><div class="abp-bars"><i style="--d:.9s"></i><i style="--d:1.3s"></i><i style="--d:.7s"></i><i style="--d:1.1s"></i><i style="--d:.8s"></i><i style="--d:1.4s"></i><i style="--d:.6s"></i><i style="--d:1.0s"></i></div></div></div>
</div>

/* Mini Player Bars · Bron: CodeShack · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.abp-card{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid rgba(10,10,10,.12);box-shadow:0 8px 24px rgba(10,10,10,.07);font-family:'Switzer',system-ui,sans-serif;width:280px}
.abp-btn{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:#0a0a0a;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.abp-btn:hover{background:#F5480F}
.abp-play{width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:3px}
.abp-pause{width:13px;height:15px;border-left:4px solid #fff;border-right:4px solid #fff;box-sizing:border-box}
.abp-meta{min-width:0}.abp-meta b{display:block;font-size:15px;color:#0a0a0a}.abp-meta small{display:block;font-size:12px;color:rgba(10,10,10,.5);margin-bottom:8px}
.abp-bars{display:flex;align-items:flex-end;gap:3px;height:22px}.abp-bars i{width:3px;height:6px;background:#F5480F;border-radius:2px;transform-origin:bottom}
.abp-card.is-playing .abp-bars i{animation:abp-eq var(--d) ease-in-out infinite alternate}
@keyframes abp-eq{from{height:4px}to{height:22px}}

// Mini Player Bars · Bron: CodeShack · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.abp-card')||root;var btn=root.querySelector('.abp-btn'),ico=root.querySelector('.abp-ico');var playing=false;btn.addEventListener('click',function(){playing=!playing;root.classList.toggle('is-playing',playing);ico.className='abp-ico '+(playing?'abp-pause':'abp-play');});
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →