bandolier-website/client/components/Spinner.svelte

<style>
.spinner {
  animation: rotate 6s linear infinite;
}

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

<script>
  export let size="48";
  export let fill="none";
  export let color="var(--color)";
  export let width="3";
  export let linecap="round";
  export let linejoin="round";
  export let name="loader";
  export let inactive=false;
  export let aspect_ratio=false;
</script>

{#if aspect_ratio}
  <div style="--aspect-ratio: { aspect_ratio }; overflow: hidden;">
    <svg data-testid="spinner" class="spinner" class:inactive={inactive}
      width={size}
      height={size / 2}
      fill={fill}
      stroke={color}
      stroke-width={width}
      stroke-linecap={linecap}
      stroke-linejoin={linejoin}
    >
    <use href="/icon-sprites.svg#{name}" />
    </svg>
  </div>
{:else}
  <svg data-testid="spinner" class="spinner" class:inactive={inactive}
    width={size}
    height={size}
    fill={fill}
    stroke={color}
    stroke-width={width}
    stroke-linecap={linecap}
    stroke-linejoin={linejoin}
  >
  <use href="/icon-sprites.svg#{name}" />
  </svg>
{/if}