<div class="container">
    <svg
        class="infinity-loader"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        width="200px"
        height="200px"
    >
        <path
            d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8"
            fill="none"
            stroke="#1d2628"
            stroke-width="1"
            stroke-linecap="round"
            stroke-linejoin="round"
        />
        <path
            id="loading-path"
            d="M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8"
            fill="none"
            stroke="#ff0088"
            stroke-width="1"
            stroke-linecap="round"
            stroke-linejoin="round"
            opacity="0"
        />
    </svg>
</div>

<script type="module">
    import { animate, svgEffect, motionValue } from "https://cdn.jsdelivr.net/npm/motion@12.16.0/+esm"

    /**
     * svgEffect is the next-generation Motion SVG renderer that makes it simple
     * to define paths that loop infinitely. In a future version of Motion it'll
     * be possible to just use the `animate` function below without the svgEffect setup.
     */
    const pathOffset = motionValue(0)
    svgEffect("#loading-path", {
        opacity: motionValue(1),
        pathLength: motionValue(0.25),
        pathOffset,
    })

    animate(pathOffset, 1, {
        duration: 1,
        repeat: Infinity,
        ease: "linear",
    })
</script>

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 40px;
        border-radius: 8px;
    }

    .infinity-loader {
        width: 200px;
        height: 200px;
    }
</style>