Loader component: Default

<div class="a-loader">
    <svg class="a-loader__animation" style="width: 27px; height: 30px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27 27">
        <style>
            <![CDATA[
            #e3F6hkMBVAf2_tr {
                animation: e3F6hkMBVAf2_tr__tr 4000ms linear infinite normal forwards
            }

            @keyframes e3F6hkMBVAf2_tr__tr {
                0% {
                    transform: translate(13.500000px, 13.500000px) rotate(90deg);
                    animation-timing-function: cubic-bezier(0.420000, 0, 0.580000, 1)
                }

                12.500000% {
                    transform: translate(13.500000px, 13.500000px) rotate(270deg);
                    animation-timing-function: cubic-bezier(0.420000, 0, 0.580000, 1)
                }

                24.500000% {
                    transform: translate(13.500000px, 13.500000px) rotate(270deg);
                    animation-timing-function: cubic-bezier(0.420000, 0, 0.580000, 1)
                }

                37% {
                    transform: translate(13.500000px, 13.500000px) rotate(450deg);
                    animation-timing-function: cubic-bezier(0.420000, 0, 0.580000, 1)
                }

                50% {
                    transform: translate(13.500000px, 13.500000px) rotate(450deg);
                    animation-timing-function: cubic-bezier(0.420000, 0, 0.580000, 1)
                }

                62.500000% {
                    transform: translate(13.500000px, 13.500000px) rotate(630deg);
                    animation-timing-function: cubic-bezier(0.420000, 0, 0.580000, 1)
                }

                75% {
                    transform: translate(13.500000px, 13.500000px) rotate(630deg);
                    animation-timing-function: cubic-bezier(0.420000, 0, 0.580000, 1)
                }

                87.500000% {
                    transform: translate(13.500000px, 13.500000px) rotate(810deg)
                }

                100% {
                    transform: translate(13.500000px, 13.500000px) rotate(810deg)
                }
            }
            ]]>
        </style>
        <g id="e3F6hkMBVAf2_tr" transform="translate(13.500000,13.500000) rotate(90)">
            <g id="e3F6hkMBVAf2" transform="translate(-10.500000,-11)">
                <ellipse id="e3F6hkMBVAf3" rx="4" ry="4" transform="matrix(1 0 0 1 3.50000000000000 4.50000000000000)" fill="#69D2C2" stroke="none" stroke-width="0">
                    <animate attributeName="fill" values="#69D2C2; #FF85BB; #FF85BB; #E41018; #E41018; #A6EC8A; #A6EC8A; #69D2C2; #69D2C2;" keyTimes="0 ; 0.1 ; 0.20 ; 0.4 ; 0.5 ; 0.6 ; 0.7 ; 0.9 ; 1" dur="4s" begin="1s" repeatCount="indefinite" />
                </ellipse>
                <ellipse id="e3F6hkMBVAf4" rx="4" ry="4" transform="matrix(1 0 0 1 17.49999999999999 4.50000000000000)" fill="#69D2C2" stroke="none" stroke-width="0">
                    <animate attributeName="fill" values="#69D2C2; #FF85BB; #FF85BB; #E41018; #E41018; #A6EC8A; #A6EC8A; #69D2C2; #69D2C2;" keyTimes="0 ; 0.1 ; 0.20 ; 0.4 ; 0.5 ; 0.6 ; 0.7 ; 0.9 ; 1" dur="4s" begin="1s" repeatCount="indefinite" />
                </ellipse>
                <ellipse id="e3F6hkMBVAf5" rx="4" ry="4" transform="matrix(1 0 0 1 3.50000000000000 17.49999999999999)" fill="#69D2C2" stroke="none" stroke-width="0">
                    <animate attributeName="fill" values="#69D2C2; #FF85BB; #FF85BB; #E41018; #E41018; #A6EC8A; #A6EC8A; #69D2C2; #69D2C2;" keyTimes="0 ; 0.1 ; 0.20 ; 0.4 ; 0.5 ; 0.6 ; 0.7 ; 0.9 ; 1" dur="4s" begin="1s" repeatCount="indefinite" />
                </ellipse>
                <ellipse id="e3F6hkMBVAf6" rx="4" ry="4" transform="matrix(1 0 0 1 17.50000000000000 17.50000000000000)" fill="#69D2C2" stroke="none" stroke-width="0">
                    <animate attributeName="fill" values="#69D2C2; #FF85BB; #FF85BB; #E41018; #E41018; #A6EC8A; #A6EC8A; #69D2C2; #69D2C2;" keyTimes="0 ; 0.1 ; 0.20 ; 0.4 ; 0.5 ; 0.6 ; 0.7 ; 0.9 ; 1" dur="4s" begin="1s" repeatCount="indefinite" />
                </ellipse>
            </g>
        </g>
    </svg>
</div>