JSFiddle - React, Tailwind, and code Playground

HTML

<div class="_preLoader" style="--n:5">
                <div class="_circle _c1" style="--i:0"></div>
                <div class="_circle _c2" style="--i:1"></div>
                <div class="_circle _c3" style="--i:2"></div>
                <div class="_circle _c4" style="--i:3"></div>
                <div class="_circle _c5" style="--i:4"></div>
            </div>

CSS

._preloader {
            display: flex;
            align-content: space-around;
            justify-content: center;
        }

        ._circle,
        ._circle::after {
            background: rgb(255, 99, 71);
            display: inline-block;
            width: 2em;
            height: 2em;
            border-radius: 50%;
            animation: a 1s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*1s) infinite
        }


        ._circle::after {
            --o: 1;
            background: #3C4252;
            content: ''
        }



        @keyframes a {
            0%,
            50% {
                transform: scale(0)
            }