Codly

html

 <body>
        <svg width="80vw" height="80vh" viewBox="0 0 130 130">
            <defs>
                <symbol id="shape">
                    <path d="M 35 56.96 A 30,45 0 0,1 95,56.96 A 30,45 30 0,1 65,108.92 A 30,45 -120 0,1 35,56.96 A 30,45 90 0,1 95,56.96 A 30,45 120 0,1 65,108.92 A 30,45 -30 0,1 35,56.96"/>
                </symbol>
            </defs>
            <use xlink:href="#shape"/>
            <use xlink:href="#shape"/>
            <use xlink:href="#shape"/>
            <use xlink:href="#shape"/>
            <use xlink:href="#shape"/>
            <use xlink:href="#shape"/>
            <use xlink:href="#shape"/>
        </svg>
    </body>

css

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #FFFFFF;
}

use {
    fill: none;
    stroke-linecap: round;
    stroke-width: 13;
    opacity: 0.8;
    animation: an linear reverse infinite;
}

use:nth-of-type(1) {
    stroke: #e2e2e2;
    stroke-width: 15;
}

use:nth-of-type(2) {
    stroke: #00b8ee;
    animation-duration: 12000ms;
    animation-delay: -1800ms;
}

use:nth-of-type(3) {
    stroke: #00909d;
    animation-duration: 6000ms;
    animation-delay: -900ms;
}

use:nth-of-type(4) {
    stroke: #4abd3b;
    animation-duration: 4000ms;
    animation-delay: -600ms;
}

use:nth-of-type(5) {
    stroke: #ff6c31;
    animation-duration: 3000ms;
    animation-delay: -450ms;
}

use:nth-of-type(6) {
    stroke: #fd4459;
    animation-duration: 2400ms;
    animation-delay: -360ms;
}

use:nth-of-type(7) {
    stroke: #fe46a2;
    animation-duration: 2000ms;
    animation-delay: -300ms;
}

@keyframes an {
    0% {
        stroke-dasharray: 1, 543.763;
        stroke-dashoffset: -542.763;
    }
    50% {
        stroke-dasharray: 115, 543.763;
        stroke-dashoffset: -157.8815;
    }
    100% {
        stroke-dasharray: 1, 543.763;
        stroke-dashoffset: 0;
    }
}