mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
60 lines
1.6 KiB
HTML
60 lines
1.6 KiB
HTML
<div class="container">
|
|
<svg width="100%" height="100" viewBox="-1 -1 22 22">
|
|
<path style="--order: 7" class="eight e-8"></path>
|
|
<path style="--order: 6" class="eight e-7"></path>
|
|
<path style="--order: 5" class="eight e-6"></path>
|
|
<path style="--order: 4" class="eight e-5"></path>
|
|
<path style="--order: 3" class="eight e-4"></path>
|
|
<path style="--order: 2" class="eight e-3"></path>
|
|
<path style="--order: 1" class="eight e-2"></path>
|
|
<path style="--order: 0" class="eight e-1"></path>
|
|
</svg>
|
|
</div>
|
|
<style>
|
|
/* From Uiverse.io by Charly-T - Tags: loader */
|
|
.container {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container svg {
|
|
--spin-duration: 2000ms;
|
|
--infinity-duration: 2000ms;
|
|
--hsl-base-h: 5deg;
|
|
--hsl-base-s: 70%;
|
|
--hsl-base-l: 50%;
|
|
animation: spin81213 var(--spin-duration) linear infinite;
|
|
}
|
|
|
|
.eight {
|
|
--eight-length-px: 60.84563446044922px;
|
|
/* As seen on getTotalLength */
|
|
--offset: calc(var(--order) * 5px);
|
|
animation: infinity8123 var(--infinity-duration) linear infinite;
|
|
d: path("m5 5a1 1 0 0110 0c0 4-10 6-10 10a1 1 0 0010 0c0-4-10-6-10-10");
|
|
fill: none;
|
|
stroke: hsl(calc(var(--hsl-base-h) * var(--order)) var(--hsl-base-s) var(--hsl-base-l));
|
|
stroke-dasharray: 6px calc(var(--eight-length-px) - 6px);
|
|
stroke-linecap: round;
|
|
stroke-width: calc(1 - var(--order) / 10);
|
|
}
|
|
|
|
@keyframes infinity8123 {
|
|
0% {
|
|
stroke-dashoffset: calc(var(--eight-length-px) + var(--offset));
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: var(--offset);
|
|
}
|
|
}
|
|
|
|
@keyframes spin81213 {
|
|
0% {
|
|
transform: rotate(0)
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg)
|
|
}
|
|
}
|
|
</style>
|