<script>
    export let thickness = 8;
    let classes = '';
    export { classes as class };

    const radius = (100 - thickness) / 2;
    // the px are fake, but we need them to satisfy css calc()
    const circumference = `${2 * Math.PI * radius}px`;
</script>


<svg 
    style:--circumference={circumference}
    class={classes}
    viewBox="0 0 100 100"
    stroke="currentColor"
>
    <circle cx="50" cy="50" r={radius} stroke-width={thickness} />
</svg>


<style>
    circle {
        fill: transparent;
        stroke-dasharray: var(--circumference);
        transform: rotate(-90deg);
        transform-origin: center;
        animation: chase 3s infinite,
                   spin 1.5s linear infinite;
    }

    @keyframes chase {
        0% { stroke-dashoffset: calc(-1 * var(--circumference)); }
        50% { stroke-dashoffset: calc(-2 * var(--circumference)); }
        100% { stroke-dashoffset: calc(-3 * var(--circumference)); }
    }

    @keyframes spin {
        50% { transform: rotate(135deg); }
        100% { transform: rotate(270deg); }
    }
</style>