Loader

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

--primary: #08002e;

background-color: #21D4FD;

background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.loader {

display: flex;

justify-content: space-evenly;

width: 80%;

margin: 0 auto;

}

span:nth-of-type(1) {

}

span:nth-of-type(2) {

animation-delay: .3s;

}

span:nth-of-type(3) {

animation-delay: .6s;

}

span:nth-of-type(4) {

animation-delay: .9s;

}

span:nth-of-type(5) {

animation-delay: 1.2s;

}

span:nth-of-type(6) {

animation-delay: 1.5s;

}

span:nth-of-type(7) {

animation-delay: 1.8s;

}

span {

display: block;

animation: rotat 2.6s linear infinite;

color: var(--primary);

font-size: calc(10vw - 10px);

text-transform: uppercase;

transform-origin:0 70%;

transform-style:preserve-3d;

text-shadow: 1px 1px 2px var(--primary);

}

@keyframes rotat {

35% {

transform: rotateX(360deg);

}

100% {

transform: rotateX(360deg);

}