mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-27 20:50:21 +08:00
45 lines
No EOL
1.1 KiB
HTML
45 lines
No EOL
1.1 KiB
HTML
<div class="loader">
|
|
<span style="--i:1px" class="load"></span>
|
|
<span style="--i:2px" class="load"></span>
|
|
<span style="--i:3px" class="load"></span>
|
|
<span style="--i:4px" class="load"></span>
|
|
<span style="--i:5px" class="load"></span>
|
|
<span style="--i:6px" class="load"></span>
|
|
<span style="--i:7px" class="load"></span>
|
|
<span style="--i:8px" class="load"></span>
|
|
<span style="--i:9px" class="load"></span>
|
|
<span style="--i:10px" class="load"></span>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by escannord - Tags: animation, loader, spinner */
|
|
.loader {
|
|
position: relative;
|
|
}
|
|
.load {
|
|
display: inline-block;
|
|
height: calc(var(--i) * 15);
|
|
width: calc(var(--i) * 15);
|
|
background-color: transparent;
|
|
position: absolute;
|
|
border: 5px rgb(47, 0, 255) solid;
|
|
border-top: none;
|
|
border-radius: 50%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: turn 2s infinite linear;
|
|
}
|
|
|
|
.load:nth-child(odd) {
|
|
animation: turn 2s infinite linear reverse;
|
|
}
|
|
|
|
@keyframes turn {
|
|
100% {
|
|
transform: translate(-50%, -50%) rotateZ(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|