CSS
body {
background: rgb(20, 20, 20);
overflow: hidden;
height: 100%;
width: 100%;
}
span {
position: relative;
display: block;
width: 100%;
height: 100%;
padding-top: 100%;
overflow: hidden;
transform: rotate(90deg);
}
div {
margin-top: -17%;
height: 34%;
width: 8px;
top: 50%;
border-radius: 20px;
position: absolute;
}
div:nth-of-type(1) { animation: wave 17s 0.000s linear infinite; }
div:nth-of-type(2) { animation: wave 17s -16.227s linear infinite; }
div:nth-of-type(3) { animation: wave 17s -15.455s linear infinite; }
div:nth-of-type(4) { animation: wave 17s -14.682s linear infinite; }
div:nth-of-type(5) { animation: wave 17s -13.909s linear infinite; }
div:nth-of-type(6) { animation: wave 17s -13.136s linear infinite; }
div:nth-of-type(7) { animation: wave 17s -12.364s linear infinite; }
div:nth-of-type(8) { animation: wave 17s -11.591s linear infinite; }
div:nth-of-type(9) { animation: wave 17s -10.818s linear infinite; }
div:nth-of-type(10) { animation: wave 17s -10.045s linear infinite; }
div:nth-of-type(11) { animation: wave 17s -9.273s linear infinite; }
div:nth-of-type(12) { animation: wave 17s -8.500s linear infinite; }
div:nth-of-type(13) { animation: wave 17s -7.727s linear infinite; }
div:nth-of-type(14) { animation: wave 17s -6.955s linear infinite; }
div:nth-of-type(15) { animation: wave 17s -6.182s linear infinite; }
div:nth-of-type(16) { animation: wave 17s -5.409s linear infinite; }
div:nth-of-type(17) { animation: wave 17s -4.636s linear infinite; }
div:nth-of-type(18) { animation: wave 17s -3.864s linear infinite; }
div:nth-of-type(19) { animation: wave 17s -3.091s linear infinite; }
div:nth-of-type(20) { animation: wave 17s -2.318s linear infinite; }
div:nth-of-type(21) { animation: wave 17s -1.545s linear infinite; }
div:nth-of-type(22) { animation: wave 17s -0.773s linear infinite; }
@keyframes wave {
0% { left:-2%; background: #3B44D1; }
5% { background: #9337FE; }
10% { height:10%; margin-top: -5%; background: #C532FC; }
15% { background: #F639F8; }
20% { height:34%; margin-top:-17%; background: #F236C8; }
25% { background: #FF2F8D; }
30% { height:10%; margin-top: -5%; background: #EE3860; }
35% { background: #DC5245; }
40% { height:34%; margin-top:-17%; background: #F38643; }
45% { background: #F8B435; }
50% { height:10%; margin-top: -5%; background: #FAF444; }
55% { background: #E0FF3B; }
60% { height:34%; margin-top:-17%; background: #E1FF3C; }
65% { background: #46F443; }
70% { height:10%; margin-top: -5%; background: #54E67B; }
75% { background: #4DF3A9; }
80% { height:34%; margin-top:-17%; background: #3AF9DA; }
85% { background: #36EBF4; }
90% { height:10%; margin-top: -5%; background: #3DB3F3; }
95% { background: #3C82F1; }
100% { height:34%; margin-top:-17%; left:100%; background: #5B38EE; }
}
