<script lang="ts">
  interface Props {
    size?: string;
    thickness?: string;
  }

  let { size = '64px', thickness = '6px' }: Props = $props();
</script>

<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>

<style>
  .lds-dual-ring {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .lds-dual-ring:after {
    content: ' ';
    display: block;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: var(--thickness) solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
  }
  @keyframes lds-dual-ring {
    0% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(36deg);
    }
    75% {
      transform: rotate(234deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
