* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #156408;
    overflow: hidden;
}
.loader {
    position: relative;
    width: 450px;
    height: 450px;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(60deg);
}
.loader span {
    position: absolute;
    inset: calc(15px * var(--i));
    border: 15px solid #fff;
    border-radius: 50%;
    animation: animate 4.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.13s);
    /* animation-play-state: paused; */
}
.loader span::before {
    content: '';
    position: absolute;
    inset: -10px;
    border: 5px dashed #156408;
    border-radius: 50%;
}
.loader span::after {
    content: '';
    position: absolute;
    inset: -20px;
    border: 2px solid #21e8a5;
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
@keyframes animate{
    0% {
        transform: translateZ(-150px) rotate(0deg)
    }
    50% {
        transform: translateZ(150px) rotate(180deg)
    }
    100%{
        transform: translateZ(-150px) rotate(360deg)
    }
}