<script lang="ts">
    export let size: string = "1em";
    export let color: string = "aliceblue";
</script>

<div class="spinner" style="--spinner-size: {size}; --spinner-color: {color};" />

<style>
    .spinner {
        display: inline-block;
        width: var(--spinner-size);
        height: var(--spinner-size);
        border: 2px solid transparent;
        border-top-color: var(--spinner-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 10px;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>
