DIZMAL CODE HELP

Name: FriendRewind
Author: FriendRewind

13 hours ago — by Kayla⟡ — Misc — used 1 times

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<style>
.pp-equalizer {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;

  width: 18px !important;
  height: 14px !important;
  margin-right: 6px !important;

  color: #ff5c8a !important;
  animation: rainbow 6s linear infinite !important;
}

.pp-equalizer span {
  display: block !important;
  width: 3px !important;
  min-width: 3px !important;
  background: currentColor !important;
  transform-origin: bottom center !important;
  animation: ppEqualizer 0.8s ease-in-out infinite !important;
}

.pp-equalizer span:nth-child(1) {
  height: 60% !important;
  animation-delay: 0s !important;
}

.pp-equalizer span:nth-child(2) {
  height: 100% !important;
  animation-delay: 0.2s !important;
}

.pp-equalizer span:nth-child(3) {
  height: 40% !important;
  animation-delay: 0.4s !important;
}

.pp-equalizer span:nth-child(4) {
  height: 80% !important;
  animation-delay: 0.1s !important;
}

@keyframes ppEqualizer {
  0%,
  100% {
    transform: scaleY(0.3);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes rainbow {
  0% {
    color: #ff5c8a;
  }

  17% {
    color: #ff9f43;
  }

  34% {
    color: #ffe66d;
  }

  51% {
    color: #48dbb4;
  }

  68% {
    color: #54a0ff;
  }

  85% {
    color: #a66cff;
  }

  100% {
    color: #ff5c8a;
  }
}
</style>

<div class="pp-equalizer">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements