loading-animation-sample.md

sample code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <defs>
        <style>
            .cls-1{fill:none;stroke:#ff7bac;stroke-miterlimit:10;stroke-width:4px;}
            .cls-2{fill:#ff7bac;}
            .cls-3{fill:#d48496;}
            .cls-4{fill:#f2c674;}
            .cls-5{fill:#88cfbd;}
        </style>
    </defs>
    <title>アートボード 1</title>
    <g id="レイヤー_1" data-name="レイヤー 1">
        <g>
            <path
                    class="cls-1"
                    d="M43.62,89.49a40,40,0,1,1,15.79-.6"/>
            <polygon
                    class="cls-2"
                    points="60.38 81.91 50 90 62.2 94.94 60.38 81.91"/>
            <animateTransform
                    attributeName="transform"
                    attributeType="XML" type="rotate"
                    from="0 50,50"
                    to="360 50,50"
                    dur="3s" repeatCount="indefinite"/>
        </g>
        <circle class="cls-3" cx="34.57" cy="50" r="6.57">
            <animate attributeName="opacity" attributeType="XML" begin="0.2" dur="1s" repeatCount="indefinite"
                     values="0.1;1;0.1"/>

        </circle>
        <circle class="cls-4" cx="51" cy="50" r="6.57">
            <animate attributeName="opacity" attributeType="XML" begin="0.4" dur="1s" repeatCount="indefinite"
                     values="0.1;1;0.1"/>

        </circle>
        <circle class="cls-5" cx="67.43" cy="50" r="6.57">
            <animate attributeName="opacity" attributeType="XML" begin="0.6" dur="1s" repeatCount="indefinite"
                     values="0.1;1;0.1"/>

        </circle>
    </g>
</svg>