Loader3d Animation

<div class="loader loader--3d" aria-hidden="true"></div>

@keyframes rotate1 {
    to {
        transform: translate(-50%,-50%) rotateY(360deg)
    }
}

@keyframes rotate2 {
    to {
        transform: translate(-50%,-50%) rotateZ(360deg)
    }
}

.loader,.loader:after,.loader:before {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%,-50%)
}

.loader {
    box-sizing: border-box;
    display: block;
    top: 50%;
    left: 50%;
    height: 60px;
    width: 60px;
    border-width: 20px 0;
    perspective: 90px
}

.loader:after,.loader:before {
    content: ""
}

.loader,.loader:before {
    border: 20px solid var(--theme-text-color)
}

.loader:before {
    top: 10px;
    left: 10px;
    width: 48px;
    height: 24px;
    border-width: 0 20px
}

.loader:after {
    top: 10px;
    left: 10px;
    height: 80px;
    width: 80px;
    border: 10px solid var(--theme-text-color)
}

.animation .loader:after {
    animation: rotate1 1s linear infinite
}

.animation .loader:before {
    animation: rotate2 .2s linear infinite
}