Loading SVG + CSS with Spin

loading.svg

<svg 
    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="100" width="100">
    <style>
        
        #circle{
           animation: spin 1s infinite linear;
           transform-origin: 50% 50%;
        }
        @keyframes spin 
        {
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(359deg);
            }
        }
    </style>
    <circle cx="50" cy="50" r="40" stroke="url(#gradient)" stroke-width="7" fill="transparent" id='circle' />
    <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#00bc9b" />
            <stop offset="50%" stop-color="steelblue" />
            <stop offset="100%" stop-color="#049" />
        </linearGradient>
    </defs>
</svg>