<script setup></script>

<template>
  <div class="w-full h-full flex items-center justify-center">
    <div class="loader"></div>
  </div>
</template>

<style lang="css" scoped>
.loader {
  width: 20%;
  height: 22px;
  border-radius: 20px;
  color: theme(colors.success);
  border: 2px solid theme(colors.success);
  position: relative;
}
.loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  inset: 0 100% 0 0;
  border-radius: inherit;
  background: currentColor;
  animation: l6 2s infinite;
}
@keyframes l6 {
  100% {
    inset: 0;
  }
}
</style>
