<script lang="ts">
  export let centered: boolean | string = false;
</script>

<div
  class="spinner lds-ripple"
  class:centered={Boolean(centered)}
  class:absolute-centered={centered == "absolute"}
>
  <i class="bx bx-loader bx-spin" />
</div>

<style>
  .spinner {
    height: 1em;
  }
  .spinner.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .spinner.absolute-centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
