mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
135 lines
No EOL
2.7 KiB
HTML
135 lines
No EOL
2.7 KiB
HTML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="loader">
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
fill-rule="evenodd"
|
|
fill="none"
|
|
stroke-width="1"
|
|
stroke="none"
|
|
>
|
|
<line y2="6" x2="24" y1="2" x1="24"></line>
|
|
<line
|
|
transform="translate(34, 6.679) rotate(30) translate(-34, -6.679)"
|
|
y2="8.679"
|
|
x2="34"
|
|
y1="4.679"
|
|
x1="34"
|
|
></line>
|
|
<line
|
|
transform="translate(41.321, 14) rotate(60) translate(-41.321, -14)"
|
|
y2="16"
|
|
x2="41.321"
|
|
y1="12"
|
|
x1="41.321"
|
|
></line>
|
|
<line
|
|
transform="translate(44, 24) rotate(90) translate(-44, -24)"
|
|
y2="26"
|
|
x2="44"
|
|
y1="22"
|
|
x1="44"
|
|
></line>
|
|
<line
|
|
transform="translate(41.321, 34) rotate(120) translate(-41.321, -34)"
|
|
y2="36"
|
|
x2="41.321"
|
|
y1="32"
|
|
x1="41.321"
|
|
></line>
|
|
<line
|
|
transform="translate(34, 41.321) rotate(150) translate(-34, -41.321)"
|
|
y2="43.321"
|
|
x2="34"
|
|
y1="39.321"
|
|
x1="34"
|
|
></line>
|
|
<line
|
|
transform="translate(24, 44) rotate(180) translate(-24, -44)"
|
|
y2="46"
|
|
x2="24"
|
|
y1="42"
|
|
x1="24"
|
|
></line>
|
|
<line
|
|
transform="translate(14, 41.321) rotate(210) translate(-14, -41.321)"
|
|
y2="43.321"
|
|
x2="14"
|
|
y1="39.321"
|
|
x1="14"
|
|
></line>
|
|
<line
|
|
transform="translate(6.679, 34) rotate(240) translate(-6.679, -34)"
|
|
y2="36"
|
|
x2="6.679"
|
|
y1="32"
|
|
x1="6.679"
|
|
></line>
|
|
<line
|
|
transform="translate(4, 24) rotate(270) translate(-4, -24)"
|
|
y2="26"
|
|
x2="4"
|
|
y1="22"
|
|
x1="4"
|
|
></line>
|
|
<line
|
|
transform="translate(6.679, 14) rotate(300) translate(-6.679, -14)"
|
|
y2="16"
|
|
x2="6.679"
|
|
y1="12"
|
|
x1="6.679"
|
|
></line>
|
|
<line
|
|
transform="translate(14, 6.679) rotate(330) translate(-14, -6.679)"
|
|
y2="8.679"
|
|
x2="14"
|
|
y1="4.679"
|
|
x1="14"
|
|
></line>
|
|
</g>
|
|
</svg>
|
|
|
|
<style>
|
|
/* From Uiverse.io by elijahgummer - Tags: simple, white, loader, dots, circle, svg, minimal, dashofset */
|
|
.loader {
|
|
width: 48px;
|
|
height: 48px;
|
|
transform: rotate(0deg);
|
|
animation: spin 2.4s linear infinite;
|
|
}
|
|
|
|
.loader line {
|
|
stroke: #ffffff; /* White color for better visibility */
|
|
stroke-width: 4;
|
|
stroke-linecap: round;
|
|
opacity: 0.8;
|
|
stroke-dasharray: 10;
|
|
stroke-dashoffset: 10;
|
|
animation: dash 2.4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes dash {
|
|
0% {
|
|
stroke-dashoffset: 10;
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
stroke-dashoffset: 0;
|
|
opacity: 0.4;
|
|
}
|
|
100% {
|
|
stroke-dashoffset: 10;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|