The HTML:

    <div class="sound-wave">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
		<div></div>
        <div></div>
        <div></div>
        <div></div>
		<div></div>
    </div>

The CSS:

@keyframes sound-wave {
    0% {
        height: 6px;
        transform: translateY(0px);
        background: #DA70D6; /*orchid*/
    }
    25% {
        height: 40px;
        transform: translateY(-5px) scaleY(1.7);
        background: #1E90FF; /*blue*/
    }
    50% {
        height: 6px;
        transform: translateY(0px);
        background: #228B22; /*green*/
    }
	75% {
        height: 6px;
        transform: translateY(0px);
        background: #FFD700; /*gold*/
	}
    100% {
        height: 6px;
        transform: translateY(0px);
        background: #ff5770; /*red*/
    }
}
.sound-wave {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    width: 8.75rem;
    height: 22.5rem;
}
.sound-wave div {
    height: 22.5rem;
    display: block;
    width: 0.6rem;
    height: 0.4rem;
    border-radius: 0.5rem;
    background: #87CEFA;
    animation: sound-wave 2.6s infinite ease-in-out;
}
.sound-wave div:nth-child(2) {
    left: 11px;
    animation-delay: 0.2s;
}
.sound-wave div:nth-child(3) {
    left: 22px;
    animation-delay: 0.4s;
}
.sound-wave div:nth-child(4) {
    left: 33px;
    animation-delay: 0.6s;
}
.sound-wave div:nth-child(5) {
    left: 44px;
    animation-delay: 0.8s;
}
.sound-wave div:nth-child(6) {
    left: 55px;
    animation-delay: 1s;
}
.sound-wave div:nth-child(7) {
    left: 66px;
    animation-delay: 1.2s;
}
.sound-wave div:nth-child(8) {
    left: 77px;
    animation-delay: 1.4s;
}
.sound-wave div:nth-child(9) {
    left: 88px;
    animation-delay: 1.6s;
}
.sound-wave div:nth-child(10) {
    left: 99px;
    animation-delay: 1.8s;
}
  

The javaScript for the loader:

    document.onreadystatechange = function () {
        if (document.readyState !== "complete") {
            document.querySelector(
                ".sound-wave").style.visibility = "visible";
        } else {
            document.querySelector(
			".sound-wave").style.display = "none";
        }
    };