<div class="fixed w-screen h-screen bg-black top-0 right-0 bg-opacity-10 backdrop-filter backdrop-blur-sm z-50">
    <div class="absolute top-0 right-0 w-full h-full flex items-center justify-center">
        <svg class="w-16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="25 25 50 50">
            <circle class="stroke-current text-brand-500 text-opacity-30" cx="50" cy="50" r="20" fill="none"
                    stroke-width="8" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="200, 300">
            </circle>
            <circle class="stroke-current text-brand-500 " cx="50" cy="50" r="20" fill="none"
                    stroke-width="8" stroke-linecap="round" stroke-dashoffset="0" stroke-dasharray="100, 200">
                <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50"
                                  to="360 50 50" dur="2.5s" repeatCount="indefinite"></animateTransform>
                <animate attributeName="stroke-dashoffset" values="0;-30;-124" dur="1.25s" repeatCount="indefinite">
                </animate>
                <animate attributeName="stroke-dasharray" values="0,200;110,200;110,200" dur="1.25s"
                         repeatCount="indefinite"></animate>
            </circle>
        </svg>
    </div>
</div>
