mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
136 lines
1.4 KiB
HTML
136 lines
1.4 KiB
HTML
<div class="loader">
|
|
<div class="box-1"></div>
|
|
<div class="box-2"></div>
|
|
<div class="box-3"></div>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by akshat-patel28 - Tags: animation, loader, animated, box */
|
|
.loader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 30px;
|
|
}
|
|
|
|
.box-1,.box-2,.box-3 {
|
|
width: 1px;
|
|
height: 115px;
|
|
border: 1px solid #e9e9e9;
|
|
background-color: transparent;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.box-1 {
|
|
animation: box1animation 4s forwards ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes box1animation {
|
|
0% {
|
|
width: 1px;
|
|
}
|
|
|
|
12.5% {
|
|
width: 60px;
|
|
}
|
|
|
|
25% {
|
|
width: 60px;
|
|
}
|
|
|
|
37.5% {
|
|
width: 1px;
|
|
}
|
|
|
|
50% {
|
|
width: 1px;
|
|
}
|
|
|
|
62.5% {
|
|
width: 1px;
|
|
}
|
|
|
|
75% {
|
|
width: 1px;
|
|
}
|
|
|
|
100% {
|
|
width: 1px;
|
|
}
|
|
}
|
|
|
|
.box-2 {
|
|
animation: box2animation 4s forwards ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes box2animation {
|
|
0% {
|
|
width: 1px;
|
|
}
|
|
|
|
12.5% {
|
|
width: 1px;
|
|
}
|
|
|
|
25% {
|
|
width: 1px;
|
|
}
|
|
|
|
37.5% {
|
|
width: 60px;
|
|
}
|
|
|
|
50% {
|
|
width: 60px;
|
|
}
|
|
|
|
62.5% {
|
|
width: 1px;
|
|
}
|
|
|
|
75% {
|
|
width: 1px;
|
|
}
|
|
|
|
100% {
|
|
width: 1px;
|
|
}
|
|
}
|
|
|
|
.box-3 {
|
|
animation: box3animation 4s forwards ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes box3animation {
|
|
0% {
|
|
width: 1px;
|
|
}
|
|
|
|
12.5% {
|
|
width: 1px;
|
|
}
|
|
|
|
25% {
|
|
width: 1px;
|
|
}
|
|
|
|
37.5% {
|
|
width: 1px;
|
|
}
|
|
|
|
50% {
|
|
width: 1px;
|
|
}
|
|
|
|
62.5% {
|
|
width: 60px;
|
|
}
|
|
|
|
75% {
|
|
width: 60px;
|
|
}
|
|
|
|
100% {
|
|
width: 1px;
|
|
}
|
|
}
|
|
</style>
|