پیشنمایش زنده
کد HTML
<div class="loader">
<svg viewBox="0 0 100 100">
<defs>
<filter id="shadow">
<fedropshadow
flood-color="#000"
stdDeviation="1.5"
dy="0"
dx="0"
></fedropshadow>
</filter>
</defs>
<circle
r="45"
cy="50"
cx="50"
style="fill:transparent;stroke:#00b4d8;stroke-width: 7px;stroke-linecap: round;filter:url(#shadow);"
id="spinner"
></circle>
</svg>
</div>
کد CSS
.loader {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes animation {
0% {
stroke-dasharray: 1 98;
stroke-dashoffset: -105;
}
50% {
stroke-dasharray: 80 10;
stroke-dashoffset: -160;
}
100% {
stroke-dasharray: 1 98;
stroke-dashoffset: -300;
}
}
#spinner {
transform-origin: center;
animation-name: animation;
animation-duration: 1.2s;
animation-timing-function: cubic-bezier;
animation-iteration-count: infinite;
}