JSFiddle - React, Tailwind, and code Playground

by tt cc

HTML

<div class="cambered-loading">
    <ul class="cambered cambered-one" id="cambered-one">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="cambered cambered-two" id="cambered-two">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="cambered cambered-three" id="cambered-three">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
       ...

CSS

.cambered-loading {
        transform: scale(1);
        position: relative;
        border: 2px solid;
        width: 450px;
        height: 240px;
        border-radius: 50%;
        padding-top: 208px;
        animation: bordercolor 10.8s forwards;
    }

    @keyframes bordercolor {
        0% {
            border-color: #b5f1bb;
        }
        16.7% {
            border-color: #3cda4b;
        }
        33.3% {
            border-color: #c3e6ff;
        }
        50% {
            border-color: #38adff;
        }
        66.6% {
            border-color: #fff2c3;
        }
        100% {
            border-color: #ffd338;
        }
    }

    .cambered li {
        display: block;
        width: 5px;
        height: 16px;
        position: absolute;
        left: 50%;
        top: -10px;
        animation-fill-mode: forwards;
    }

    .cambered-one {
        transform: rotateZ(-54deg);
    }

    .cambered-one li {
        background: #b5f1bb;
        animation-name: cambered-one;
    }

    @keyframes cambered-one {
        0% {
            background: #3cda4b;
        }
        100% {
            background: #3cda4b;
        }
    }

    .cambered-two {
        transform: rotateZ(-174deg);
    }

    .cambered-two li {
        background: #fff2c3;
    }

    .cambered-two.animate li {
        animation-name: cambered-two;
    }

    @keyframes cambered-two {
        0% {
            background: #ffd338;
        }
        100% {
            background: #ffd338;
        }
    }

    .cambered-three {
        transform: rotateZ(66deg);
    }

    .cambered-three li {
        background: #c3e6ff;
    }

    .cambered-three.animate li {
        animation-name: cambered-three;
    }

    @keyframes cambered-three {
        0% {
            background: #38adff;
        }
        100% {
            background: #38adff;
        }
    }

    .cambered li:first-child {
        animation-delay: 0.1s;
        transform: rotate(3deg) translateY(-200px)
    }

   ...

JavaScript

setTimeout(function () {
        document.getElementById("cambered-three").className = "cambered cambered-three animate";
        setTimeout(function () {
            document.getElementById("cambered-two").className = "cambered cambered-two animate";
        }, 3600)
    }, 3600)