<script lang="ts">
  export let size: number = 36;
  export let color: string = "#0366d6";
</script>

<div class="rs" aria-hidden="true" style="width: {size}px; height: {size}px;">
  <svg viewBox="0 0 50 50" class="spin" width="100%" height="100%">
    <circle
      class="bg"
      cx="25"
      cy="25"
      r="20"
      fill="none"
      stroke="#e6eef6"
      stroke-width="6"
    />
    <path
      class="arc"
      d="M25 5 a20 20 0 0 1 0 40"
      stroke-linecap="round"
      fill="none"
      stroke-width="6"
      stroke={color}
    />
  </svg>
</div>

<style>
  .rs {
    display: inline-block;
    vertical-align: middle;
  }

  .spin {
    transform-origin: center;
    animation: rs-spin 0.9s linear infinite;
    display: block;
  }

  .arc {
    stroke-linecap: round;
  }

  @keyframes rs-spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>
