galaxy/loaders/Shoh2008_dull-cheetah-34.html

64 lines
932 B
HTML

<div class="loader"></div>
<style>
/* From Uiverse.io by Shoh2008 - Tags: loader */
.loader {
width: 48px;
height: 48px;
display: flex;
transform-origin: 50% 125%;
animation: mov-y 1s infinite linear;
}
.loader:before,
.loader:after {
content: "";
flex: 1;
background: #fff;
transform-origin: 0% 100%;
animation: rtr-x 1s infinite linear;
}
.loader:before {
transform-origin: 100% 100%;
animation-name: rtr-rx;
}
@keyframes mov-y {
0%,25% {
transform: translateY(0) scaleY(1)
}
49% {
transform: translateY(-75%) scaleY(1)
}
50% {
transform: translateY(-75%) scaleY(-1)
}
75%,100% {
transform: translateY(-150%) scaleY(-1)
}
}
@keyframes rtr-x {
25%,75% {
transform: rotate(0deg)
}
50% {
transform: rotate(90deg)
}
}
@keyframes rtr-rx {
25%,75% {
transform: rotate(0deg)
}
50% {
transform: rotate(-90deg)
}
}
</style>