mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
39 lines
No EOL
741 B
HTML
39 lines
No EOL
741 B
HTML
<div class="textWrapper">
|
|
<p class="text">Loading...</p>
|
|
<div class="invertbox"></div>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Uncannypotato69 - Tags: simple, animation, white, black, loading, loader, text animation, css */
|
|
.textWrapper {
|
|
height: fit-content;
|
|
min-width: 3rem;
|
|
width: fit-content;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.25ch;
|
|
position: relative;
|
|
z-index: 0;
|
|
color: white;
|
|
}
|
|
|
|
.invertbox {
|
|
position: absolute;
|
|
height: 100%;
|
|
aspect-ratio: 1/1;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 20%;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: invert(100%);
|
|
animation: move 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes move {
|
|
50% {
|
|
left: calc(100% - 3rem);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|