mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
69 lines
No EOL
2.6 KiB
HTML
69 lines
No EOL
2.6 KiB
HTML
<div class="loader">
|
|
<svg
|
|
preserveAspectRatio="xMidYMid meet"
|
|
width="40"
|
|
height="40"
|
|
viewBox="0 0 40 40"
|
|
y="0px"
|
|
x="0px"
|
|
class="container"
|
|
>
|
|
<path
|
|
d="M29.760000000000005 18.72 c0 7.28 -3.9200000000000004 13.600000000000001 -9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.840000000000002 2.64 c -3.6 0 -6.88 -0.96 -9.76 -2.64 c0 -7.28 3.9200000000000004 -13.52 9.840000000000002 -16.96 c2.8800000000000003 -1.6800000000000002 6.24 -2.64 9.76 -2.64 S26.880000000000003 17.040000000000003 29.760000000000005 18.72 c5.84 3.3600000000000003 9.76 9.68 9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.76 2.64 c -3.6 0 -6.88 -0.96 -9.840000000000002 -2.64 c -5.84 -3.3600000000000003 -9.76 -9.68 -9.76 -16.96 c0 -7.28 3.9200000000000004 -13.600000000000001 9.76 -16.96 C25.84 5.120000000000001 29.760000000000005 11.440000000000001 29.760000000000005 18.72z"
|
|
pathLength="100"
|
|
stroke-width="4"
|
|
fill="none"
|
|
class="track"
|
|
></path>
|
|
<path
|
|
d="M29.760000000000005 18.72 c0 7.28 -3.9200000000000004 13.600000000000001 -9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.840000000000002 2.64 c -3.6 0 -6.88 -0.96 -9.76 -2.64 c0 -7.28 3.9200000000000004 -13.52 9.840000000000002 -16.96 c2.8800000000000003 -1.6800000000000002 6.24 -2.64 9.76 -2.64 S26.880000000000003 17.040000000000003 29.760000000000005 18.72 c5.84 3.3600000000000003 9.76 9.68 9.840000000000002 16.96 c -2.8800000000000003 1.6800000000000002 -6.24 2.64 -9.76 2.64 c -3.6 0 -6.88 -0.96 -9.840000000000002 -2.64 c -5.84 -3.3600000000000003 -9.76 -9.68 -9.76 -16.96 c0 -7.28 3.9200000000000004 -13.600000000000001 9.76 -16.96 C25.84 5.120000000000001 29.760000000000005 11.440000000000001 29.760000000000005 18.72z"
|
|
pathLength="100"
|
|
stroke-width="4"
|
|
fill="none"
|
|
class="car"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
|
|
<style>
|
|
/* From Uiverse.io by Z4drus - Tags: loader */
|
|
.container {
|
|
--uib-size: 100px;
|
|
--uib-color: rgb(51, 172, 241);
|
|
--uib-speed: 1.4s;
|
|
--uib-bg-opacity: 0.1;
|
|
height: var(--uib-size);
|
|
width: var(--uib-size);
|
|
transform-origin: center;
|
|
overflow: visible;
|
|
}
|
|
|
|
.car {
|
|
fill: none;
|
|
stroke: var(--uib-color);
|
|
stroke-dasharray: 15, 85;
|
|
stroke-dashoffset: 0;
|
|
stroke-linecap: round;
|
|
animation: travel var(--uib-speed) linear infinite;
|
|
will-change: stroke-dasharray, stroke-dashoffset;
|
|
transition: stroke 0.5s ease;
|
|
}
|
|
|
|
.track {
|
|
stroke: var(--uib-color);
|
|
opacity: var(--uib-bg-opacity);
|
|
transition: stroke 0.5s ease;
|
|
}
|
|
|
|
@keyframes travel {
|
|
0% {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: -100;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
|