mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
64 lines
932 B
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>
|