<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49.7" height="49.7" viewBox="0,0,49.7,49.7" class="loading-spin">
<defs>
<linearGradient x1="240" y1="158.9" x2="240" y2="201.1" gradientUnits="userSpaceOnUse" id="color-1">
<stop offset="0" stop-color="#00ffff"/>
<stop offset="1" stop-color="#ff0000"/>
</linearGradient>
<radialGradient cx="240.62986" cy="159.71199" r="16.14165" gradientUnits="userSpaceOnUse" id="color-2">
<stop offset="0" stop-color="#0026ff"/>
<stop offset="1" stop-color="#0026ff" stop-opacity="0"/>
</radialGradient>
</defs>
<g transform="translate(-215.15,-155.15)">
<g data-paper-data="{"isPaintingLayer":true}" fill="none" fill-rule="nonzero" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal">
<path d="M218.9,180c0,-11.65321 9.44679,-21.1 21.1,-21.1c11.65321,0 21.1,9.44679 21.1,21.1c0,11.65321 -9.44679,21.1 -21.1,21.1c-11.65321,0 -21.1,-9.44679 -21.1,-21.1z" stroke="url(#color-1)" stroke-width="7.5"/>
<path d="M218.9,180c0,-11.65321 9.44679,-21.1 21.1,-21.1c11.65321,0 21.1,9.44679 21.1,21.1c0,11.65321 -9.44679,21.1 -21.1,21.1c-11.65321,0 -21.1,-9.44679 -21.1,-21.1z" stroke="#ffffff" stroke-width="5"/>
<path d="M224.03249,166.32965c4.79594,-5.61067 12.40062,-8.53679 20.15622,-6.99977c5.20954,1.03244 9.58811,3.90046 12.59666,7.79855" stroke="url(#color-2)" stroke-width="5"/>
</g>
</g>
</svg>
<style>
.loading-spin {
animation-name: loading-spin;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
width: 100%;
}
.loading-spin svg {
margin: 10px auto;
}
@keyframes loading-spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
