JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div id="preloader-global" class="preloader-global"><div class="preloader-global__item"></div><div class="preloader-global__item"></div><div class="preloader-global__item"></div></div>

CSS

.preloader-global {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
}
.preloader-global__item:nth-child(1) {
    animation: loader-item1 2.4s linear infinite;
    border-color: #ffc83c;
    transform: translate(65%,20%);
}
.preloader-global__item {
    width: 40px;
    height: 40px;
    border: solid 5px;
    border-radius: 50%;
}

.preloader-global__item:nth-child(2) {
    z-index: 20;
    animation: loader-item2 2.4s linear infinite;
    border-color: #ff5252;
    transform: translate(0,-25%);
}
.preloader-global__item {
    width: 40px;
    height: 40px;
    border: solid 5px;
    border-radius: 50%;
}
.preloader-global__item:nth-child(3) {
    margin: 0;
    animation: loader-item3 2.4s linear infinite;
    border-color: #20aeff;
    transform: translate(-65%,20%);
}
.preloader-global__item {
    width: 40px;
    height: 40px;
    border: solid 5px;
    border-radius: 50%;
}

@keyframes loader-item1 {
0% {
    -webkit-transform: translate(65%,20%);
    transform: translate(65%,20%);
}
25% {
    -webkit-transform: translate(100%,20%);
    transform: translate(100%,20%);
}
50% {
    -webkit-transform: translate(200%,20%);
    transform: translate(200%,20%);
}
75% {
    -webkit-transform: translate(100%,20%);
    transform: translate(100%,20%);
}
}

@keyframes loader-item2 {
0% {
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
}
50% {
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
}
}

@keyframes loader-item3 {
0% {
    -webkit-transform: translate(-65%,20%);
    transform: translate(-65%,20%);
}
25% {
    -webkit-transform: translate(-100%,20%);
    transform: translate(-100%,20%);
}
50% {
    -webkit-transform: translate(-200%,20%);
    transform: translate(-200%,20%);
}
75% {
    -webkit-transform: translate(-100%,20%);
    transform: translate(-100%,20%);
}
}