<div class="cssload-wrap">
<div class="cssload-cssload-spinner"></div>
</div>
.cssload-wrap {
display: flex;
display: flex;
display: flex;
display: flex;
display: flex;
box-pack: center;
box-pack: center;
box-pack: center;
box-pack: center;
box-pack: center;
justify-content: center;
justify-content: center;
justify-content: center;
justify-content: center;
justify-content: center;
box-align: center;
box-align: center;
box-align: center;
box-align: center;
box-align: center;
align-items: center;
align-items: center;
align-items: center;
align-items: center;
align-items: center;
perspective: 390px;
perspective: 390px;
perspective: 390px;
perspective: 390px;
perspective: 390px;
height: 100vh;
overflow: hidden;
}
.cssload-cssload-spinner {
position: relative;
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;
transform-style: preserve-3d;
animation: cssload-wobble 4.59s ease-in-out infinite;
animation: cssload-wobble 4.59s ease-in-out infinite;
animation: cssload-wobble 4.59s ease-in-out infinite;
animation: cssload-wobble 4.59s ease-in-out infinite;
animation: cssload-wobble 4.59s ease-in-out infinite;
}
.cssload-cssload-spinner:before,
.cssload-cssload-spinner:after {
display: block;
content: ' ';
border-radius: 50%;
width: 88px;
height: 88px;
clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
animation: cssload-spin 1.73s ease-in-out infinite both reverse;
animation: cssload-spin 1.73s ease-in-out infinite both reverse;
animation: cssload-spin 1.73s ease-in-out infinite both reverse;
animation: cssload-spin 1.73s ease-in-out infinite both reverse;
animation: cssload-spin 1.73s ease-in-out infinite both reverse;
}
.cssload-cssload-spinner:before {
background-color: #02baff;
background: linear-gradient(to right, #3271ff, #02baff);
position: absolute;
}
.cssload-cssload-spinner:after {
background-color: #4c4c4c;
background: linear-gradient(to right, #768f9d, #4c4c4c);
animation-delay: -0.86s;
animation-delay: -0.86s;
animation-delay: -0.86s;
animation-delay: -0.86s;
animation-delay: -0.86s;
}
@keyframes cssload-wobble {
0%,
100% {
transform: rotateX(8.75deg) rotateY(35deg);
}
50% {
transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
}
}
@-o-keyframes cssload-wobble {
0%,
100% {
transform: rotateX(8.75deg) rotateY(35deg);
}
50% {
transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
}
}
@-ms-keyframes cssload-wobble {
0%,
100% {
transform: rotateX(8.75deg) rotateY(35deg);
}
50% {
transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
}
}
@-webkit-keyframes cssload-wobble {
0%,
100% {
transform: rotateX(8.75deg) rotateY(35deg);
}
50% {
transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
}
}
@-moz-keyframes cssload-wobble {
0%,
100% {
transform: rotateX(8.75deg) rotateY(35deg);
}
50% {
transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
}
}
@keyframes cssload-spin {
0%,
100% {
transform: translateZ(49px) rotateX(14deg);
}
33% {
transform: translateZ(-49px) scale(0.4);
}
66% {
transform: translateZ(-49px);
}
}
@-o-keyframes cssload-spin {
0%,
100% {
transform: translateZ(49px) rotateX(14deg);
}
33% {
transform: translateZ(-49px) scale(0.4);
}
66% {
transform: translateZ(-49px);
}
}
@-ms-keyframes cssload-spin {
0%,
100% {
transform: translateZ(49px) rotateX(14deg);
}
33% {
transform: translateZ(-49px) scale(0.4);
}
66% {
transform: translateZ(-49px);
}
}
@-webkit-keyframes cssload-spin {
0%,
100% {
transform: translateZ(49px) rotateX(14deg);
}
33% {
transform: translateZ(-49px) scale(0.4);
}
66% {
transform: translateZ(-49px);
}
}
@-moz-keyframes cssload-spin {
0%,
100% {
transform: translateZ(49px) rotateX(14deg);
}
33% {
transform: translateZ(-49px) scale(0.4);
}
66% {
transform: translateZ(-49px);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.