mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
60 lines
No EOL
1.2 KiB
HTML
60 lines
No EOL
1.2 KiB
HTML
<div class="container">
|
|
<div class="loader" style="--clr:#01e100;--i:1;"></div>
|
|
<div class="loader" style="--clr:#f50076;--i:2;"></div>
|
|
<div class="loader" style="--clr:#00e6fd;--i:3;"></div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by codebykay101 - Tags: simple, card, neon, cool card, cardhover , card animation, card hover */
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.loader {
|
|
position: relative;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: rgba(45, 45, 45, 1);
|
|
overflow: hidden;
|
|
transform: rotate(calc(90deg * var(--i)));
|
|
}
|
|
|
|
.loader::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 300px;
|
|
height: 300px;
|
|
background: radial-gradient(var(--clr), transparent);
|
|
animation: animate 1.5s linear infinite;
|
|
}
|
|
|
|
.loader::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 2px;
|
|
background: rgba(45, 45, 45, 0.9);
|
|
}
|
|
|
|
@keyframes animate {
|
|
0% {
|
|
transform: translate(-150px, -150px);
|
|
}
|
|
25% {
|
|
transform: translate(0px, -150px);
|
|
}
|
|
50% {
|
|
transform: translate(0px, 0px);
|
|
}
|
|
75% {
|
|
transform: translate(-150px, 0px);
|
|
}
|
|
100% {
|
|
transform: translate(-150px, -150px);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|