• HTML
• CSS

HTML

<div class="loading">
    <span style="--i:1;"></span>
    <span style="--i:2;"></span>
    <span style="--i:3;"></span>
    <span style="--i:4;"></span>
    <span style="--i:5;"></span>
    <span style="--i:6;"></span>
    <span style="--i:7;"></span>
    <span style="--i:8;"></span>
    <span style="--i:9;"></span>
    <span style="--i:10;"></span>
    <span style="--i:11;"></span>
    <span style="--i:12;"></span>
    <span style="--i:13;"></span>
    <span style="--i:14;"></span>
    <span style="--i:15;"></span>
    <span style="--i:16;"></span>
    <span style="--i:17;"></span>
    <span style="--i:18;"></span>
    <span style="--i:19;"></span>
    <span style="--i:20;"></span>
</div>

CSS

*
{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body
{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#222;
}
.loading
{
    position:relative;
    display:flex;
    gap:15px;
}
.loading span
{
    position:relative;
    width:5px;
    height:20px;
}
.loading span::before
{
    content:'';
    position:absolute;
    inset:0;
    animation:animate 8s linear infinite;
    animation-delay:calc(var(--i) * 0.1s);
}
@keyframes animate
{
    0%
    {
        background:#0f0;
        box-shadow:0 0 5px #0f0;
        0 0 15px #0f0,
        0 0 30px #0f0,
        0 0 50px #0f0;
    }
    20%
    {
        background:#0f0;
        box-shadow:0 0 5px #0f0;
        0 0 15px #0f0,
        0 0 30px #0f0,
        0 0 50px #0f0;
    }
    40%
    {
        background:#0f0;
        box-shadow: 0 0 5px #0f0,
        0 0 15px #0f0,
        0 0 30px #0f0,
        0 0 50px #0f0;
        rotate:90deg;
        transform-origin:bottom;
        filter:hue-rotate(0deg);
    }
    80%
    {
        background:#0f0;
        box-shadow:0 0 5px #0f0;
        0 0 15px #0f0,
        0 0 30px #0f0,
        0 0 50px #0f0;
        rotate:90deg;
        transform-origin:bottom;
        filter:hue-rotate(360deg);
    }
    90%
    {
        background:#000;
        box-shadow:none;
        rotate:0deg;
    }
    90.1%,100%
    {
        background:#000;
        box-shadow:none;
    }
}

/*
  All the credits: https://www.youtube.com/watch?v=dMlIsuhiA48
*/