mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
49 lines
801 B
HTML
49 lines
801 B
HTML
<div class="spinner">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
|
|
.spinner {
|
|
--gap: 5px;
|
|
--clr: #d62d20;
|
|
--height: 23px;
|
|
width: 100px;
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--gap);
|
|
}
|
|
|
|
.spinner span {
|
|
background: var(--clr);
|
|
width: 6px;
|
|
height: var(--height);
|
|
animation: grow 1s ease-in-out infinite;
|
|
}
|
|
|
|
.spinner span:nth-child(2) {
|
|
animation: grow 1s ease-in-out 0.15s infinite;
|
|
}
|
|
|
|
.spinner span:nth-child(3) {
|
|
animation: grow 1s ease-in-out 0.3s infinite;
|
|
}
|
|
|
|
.spinner span:nth-child(4) {
|
|
animation: grow 1s ease-in-out 0.475s infinite;
|
|
}
|
|
|
|
@keyframes grow {
|
|
0%,100% {
|
|
transform: scaleY(1);
|
|
}
|
|
|
|
50% {
|
|
transform: scaleY(1.8);
|
|
}
|
|
}
|
|
</style>
|