Create Amazing 360 Loading Character Animation | CSS Loader

				
					* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "franklin gothic medium", sans-serif;
}

html,
body {
    display: grid;
    height: 100%;
    place-items: center;
    background: #212121;
}

.loader {
    -webkit-perspective: 700px;
    perspective: 700px;
    background: red;
    padding: 10px 20px;

}

.loader>span {
    font-size: 60px;
    display: inline-block;
    transform-origin: 0 70%;
    transform-style: preserve-3d;
    animation: flip 2.6s infinite linear;
}

@keyframes flip {
    35% {
        transform: rotateZ(360deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

.loader>span:nth-child(even) {
    color: #fff;
}

.loader>span:nth-child(2) {
    animation-delay: 0.3s;
}

.loader>span:nth-child(3) {
    animation-delay: 0.6s;
}

.loader>span:nth-child(4) {
    animation-delay: 0.9s;
}

.loader>span:nth-child(5) {
    animation-delay: 1.2s;
}

.loader>span:nth-child(6) {
    animation-delay: 1.5s
}

.loader>span:nth-child(7) {
    animation-delay: 1.8s
}