Equalizer Bars

<link rel="stylesheet" href="/assets/preloaders/equalizer-bars.css">

<!-- Default equalizer -->
<div class="rc-eq" role="status" aria-label="Loading"
     style="--barW:10px;--gap:8px;--height:52px;--speed:900ms"></div>

<!-- Gradient spectrum style -->
<div class="rc-eq spectrum"
     style="--barW:10px;--gap:8px;--height:52px;--speed:900ms"></div>

<!-- Center-out emphasis -->
<div class="rc-eq center"
     style="--barW:12px;--gap:8px;--height:64px;--speed:1100ms"></div>

/* RetroCrave — Equalizer Bars (CSS-only) */
.rc-eq{
  --bars: 5;               /* number of bars */
  --barW: 10px;            /* bar width */
  --gap: 8px;              /* gap between bars */
  --height: 52px;          /* total loader height */
  --speed: 900ms;          /* animation speed */
  --color: #5ef1ff;        /* single-color mode */
  --glow: .28;             /* drop-shadow glow (0–.6) */

  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: var(--gap);
  height: var(--height);
  width: calc(var(--bars) * var(--barW) + (var(--bars) - 1) * var(--gap));
  filter: drop-shadow(0 0 14px rgba(94,241,255,var(--glow)));
}

/* Create bars via CSS (no extra markup) */
.rc-eq::before,
.rc-eq::after{
  content: "";
}
.rc-eq,
.rc-eq::before,
.rc-eq::after{
  --bar-bg: var(--color);
  background:
    linear-gradient(var(--bar-bg) 0 0) 0% 100% / var(--barW) 30% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 25% 100% / var(--barW) 55% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 50% 100% / var(--barW) 75% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 75% 100% / var(--barW) 55% no-repeat,
    linear-gradient(var(--bar-bg) 0 0) 100% 100% / var(--barW) 35% no-repeat;
  background-repeat: no-repeat;
  border-radius: 6px;
  -webkit-mask:
    radial-gradient(8px at 0    100%,#0000 99%,#000 101%) 0    0/25% 100%,
    radial-gradient(8px at 50%  100%,#0000 99%,#000 101%) 50%  0/25% 100%,
    radial-gradient(8px at 100% 100%,#0000 99%,#000 101%) 100% 0/25% 100%;
  mask:
    radial-gradient(8px at 0    100%,#0000 99%,#000 101%) 0    0/25% 100%,
    radial-gradient(8px at 50%  100%,#0000 99%,#000 101%) 50%  0/25% 100%,
    radial-gradient(8px at 100% 100%,#0000 99%,#000 101%) 100% 0/25% 100%;
  animation: rc-eq-anim var(--speed) ease-in-out infinite;
}

/* Stagger the phases to create the dance */
.rc-eq{ animation-delay: 0ms; }
.rc-eq::before{ animation-delay: calc(var(--speed) * -.33); }
.rc-eq::after{  animation-delay: calc(var(--speed) * -.66); }

@keyframes rc-eq-anim{
  0%,100%{
    background-size:
      var(--barW) 30%, var(--barW) 55%, var(--barW) 75%, var(--barW) 55%, var(--barW) 35%;
  }
  50%{
    background-size:
      var(--barW) 68%, var(--barW) 35%, var(--barW) 92%, var(--barW) 40%, var(--barW) 70%;
  }
}

/* Gradient spectrum style */
.rc-eq.spectrum,
.rc-eq.spectrum::before,
.rc-eq.spectrum::after{
  --bar-bg: linear-gradient(180deg,#5ef1ff,#ff6bd6 60%,#ffe66b);
}

/* Center-out emphasis (middle bar reaches higher) */
.rc-eq.center{ --glow:.34; }
.rc-eq.center,
.rc-eq.center::before,
.rc-eq.center::after{
  animation-name: rc-eq-anim-center;
}
@keyframes rc-eq-anim-center{
  0%,100%{
    background-size:
      var(--barW) 28%, var(--barW) 52%, var(--barW) 68%, var(--barW) 52%, var(--barW) 28%;
  }
  50%{
    background-size:
      var(--barW) 55%, var(--barW) 42%, var(--barW) 96%, var(--barW) 42%, var(--barW) 55%;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .rc-eq, .rc-eq::before, .rc-eq::after{ animation: none !important }
}