SOURCE

const tl = gsap.timeline({
    defaults: {
        duration: 1,
        y: 200,
        ease: 'power1.in'
    }
});
tl.to('.item1', { repeat: -1, yoyo: true })
    .to('.item2', {})
    .to('.item3', {})
    .to('.item4', {})
    .to('.item5', {});

<div class="loading-wrapper">
    <div class="loading-item item1"></div>
    <div class="loading-item item2"></div>
    <div class="loading-item item3"></div>
    <div class="loading-item item4"></div>
    <div class="loading-item item5"></div>
</div>

html,
body {
    height: 100%
}

.loading-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.loading-item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    background-color: currentColor;
    margin: 0 10px;
}

.item1 {
    color: green;
}

.item2 {
    color: purple;
}

.item3 {
    color: blue;
}

.item4 {
    color: red;
}

.item5 {
    color: orange;
}