mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
68 lines
1.1 KiB
HTML
68 lines
1.1 KiB
HTML
<div class="loader"></div>
|
|
<style>
|
|
/* From Uiverse.io by Ankesh2002 - Tags: loader */
|
|
.loader {
|
|
position: relative;
|
|
width: 164px;
|
|
height: 164px;
|
|
}
|
|
|
|
.loader::before , .loader::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #00bd26;
|
|
left: 50%;
|
|
top: 50%;
|
|
animation: rotate 1s ease-in infinite;
|
|
}
|
|
|
|
.loader::after {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #00bd26;
|
|
animation: rotate 1s ease-in infinite, moveY 1s ease-in infinite;
|
|
}
|
|
|
|
@keyframes moveY {
|
|
0% , 100% {
|
|
top: 10%
|
|
}
|
|
|
|
45% , 55% {
|
|
top: 59%
|
|
}
|
|
|
|
60% {
|
|
top: 40%
|
|
}
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: translate(-50%, -100%) rotate(0deg) scale(1 , 1)
|
|
}
|
|
|
|
25% {
|
|
transform: translate(-50%, 0%) rotate(180deg) scale(1 , 1)
|
|
}
|
|
|
|
45% , 55% {
|
|
transform: translate(-50%, 100%) rotate(180deg) scale(3 , 0.5)
|
|
}
|
|
|
|
60% {
|
|
transform: translate(-50%, 100%) rotate(180deg) scale(1, 1)
|
|
}
|
|
|
|
75% {
|
|
transform: translate(-50%, 0%) rotate(270deg) scale(1 , 1)
|
|
}
|
|
|
|
100% {
|
|
transform: translate(-50%, -100%) rotate(360deg) scale(1 , 1)
|
|
}
|
|
}
|
|
|
|
</style>
|