پیشنمایش زنده
کد HTML
<div class="loader">
<svg
class="container"
x="0px"
y="0px"
viewBox="0 0 40 40"
height="40"
width="40"
preserveAspectRatio="xMidYMid meet"
>
<path
class="track"
fill="none"
stroke-width="4"
pathLength="100"
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"
></path>
<path
class="car"
fill="none"
stroke-width="4"
pathLength="100"
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"
></path>
</svg>
</div>
کد CSS
.container {
--uib-size: 100px;
--uib-color: #f0f9ff;
--uib-speed: 2s;
--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 1s ease;
}
.track {
stroke: var(--uib-color);
opacity: var(--uib-bg-opacity);
transition: stroke 1s ease;
}
@keyframes travel {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}