loading.svg

<svg viewBox="0 0 100 100" width="100" height="100" class="lds-spinner" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" style="shape-rendering: auto; animation-play-state: running; animation-delay: 0s; background: none;">

        <g transform="rotate(360 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(396 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(432 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(108 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(144 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(180 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(216 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(252 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(288 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1s" repeatCount="indefinite"></animate></rect></g>
        <g transform="rotate(324 50 50)" ><rect x="45" y="15" rx="18" ry="6" width="10" height="10" fill="var(--fill, #FF00AA)" ><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.0s" repeatCount="indefinite"></animate></rect></g>

    </svg>