Equalizer

HTML
<figure> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </figure>
CSS
@keyframes bar { 50% { height: 139px; } } body { background: #050505; } figure { height: 150px; width: 95%; max-width: 350px; margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); box-sizing: border-box; border: 1px solid #83F556; } div { width: 12.5%; height: 100%; display: inline-block; } div:after { content: ""; position: absolute; bottom: 0; width: 12.5%; animation: bar 1.5s infinite linear; background: #83F556; box-shadow: 0px 0px 25px #83F556; height: 47px; } div:nth-child(1):after { animation-delay: -1s; background: #83F556; box-shadow: 0px 0px 25px #83F556; } div:nth-child(2):after { animation-delay: -1.2s; background: #51B52A; box-shadow: 0px 0px 25px #51B52A; } div:nth-child(3):after { animation-delay: -2s; background: #248000; box-shadow: 0px 0px 25px #248000; } div:nth-child(4):after { animation-delay: -2.4s; background: #83F556; box-shadow: 0px 0px 25px #83F556; } div:nth-child(5):after { animation-delay: -3s; background: #51B52A; box-shadow: 0px 0px 25px #51B52A; } div:nth-child(6):after { animation-delay: -3.6s; background: #248000; box-shadow: 0px 0px 25px #248000; } div:nth-child(7):after { animation-delay: -4s; background: #83F556; box-shadow: 0px 0px 25px #83F556; } div:nth-child(8):after { animation-delay: -4.8s; background: #51B52A; box-shadow: 0px 0px 25px #51B52A; } div:nth-child(9):after { animation-delay: -5s; background: #248000; box-shadow: 0px 0px 25px #248000; }
JAVASCRIPT
Expand for more options Login