<div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent dark:border-navy-300 dark:border-r-transparent"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-secondary border-r-transparent"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-info border-r-transparent"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-success border-r-transparent"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-warning border-r-transparent"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-error border-r-transparent"
  ></div>
              

                
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-slate-500 border-r-transparent dark:border-navy-300 dark:border-r-transparent"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-secondary border-r-transparent"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-info border-r-transparent"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-success border-r-transparent"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-warning border-r-transparent"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-error border-r-transparent"
  ></div>
              

                
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-slate-150 border-r-slate-500 dark:border-navy-500 dark:border-r-navy-300"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-secondary/30 border-r-secondary"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-info/30 border-r-info"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-success/30 border-r-success"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-warning/30 border-r-warning"
  ></div>
  <div
    class="spinner size-7 animate-spin rounded-full border-[3px] border-error/30 border-r-error"
  ></div>

              

                
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-slate-150 border-r-slate-500 dark:border-navy-500 dark:border-r-navy-300"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-secondary/30 border-r-secondary"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-info/30 border-r-info"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-success/30 border-r-success"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-warning/30 border-r-warning"
  ></div>
  <div
    class="spinner is-elastic size-7 animate-spin rounded-full border-[3px] border-error/30 border-r-error"
  ></div>
              

                
  <div class="spinner is-grow relative size-7">
    <span
      class="absolute inline-block h-full w-full rounded-full bg-slate-500 opacity-75 dark:bg-navy-300"
    ></span>
    <span
      class="absolute inline-block h-full w-full rounded-full bg-slate-500 opacity-75 dark:bg-navy-300"
    ></span>
  </div>
  <div class="spinner is-grow relative size-7">
    <span
      class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
    ></span>
    <span
      class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
    ></span>
  </div>
  <div class="spinner is-grow relative size-7">
    <span
      class="absolute inline-block h-full w-full rounded-full bg-secondary opacity-75"
    ></span>
    <span
      class="absolute inline-block h-full w-full rounded-full bg-secondary opacity-75"
    ></span>
  </div>
  <div class="spinner is-grow relative size-7">
    <span
      class="absolute inline-block h-full w-full rounded-full bg-info opacity-75"
    ></span>
    <span
      class="absolute inline-block h-full w-full rounded-full bg-info opacity-75"
    ></span>
  </div>
  <div class="spinner is-grow relative size-7">
    <span
      class="absolute inline-block h-full w-full rounded-full bg-success opacity-75"
    ></span>
    <span
      class="absolute inline-block h-full w-full rounded-full bg-success opacity-75"
    ></span>
  </div>
  <div class="spinner is-grow relative size-7">
    <span
      class="absolute inline-block h-full w-full rounded-full bg-warning opacity-75"
    ></span>
    <span
      class="absolute inline-block h-full w-full rounded-full bg-warning opacity-75"
    ></span>
  </div>
  <div class="spinner is-grow relative size-7">
    <span
      class="absolute inline-block h-full w-full rounded-full bg-error opacity-75"
    ></span>
    <span
      class="absolute inline-block h-full w-full rounded-full bg-error opacity-75"
    ></span>
  </div>
              

                
  <div class="spinner size-7 animate-spin text-slate-500 dark:text-navy-300">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner size-7 animate-spin text-primary dark:text-accent">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div
    class="spinner size-7 animate-spin text-secondary dark:text-secondary-light"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner size-7 animate-spin text-info">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner size-7 animate-spin text-success">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner size-7 animate-spin text-warning">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner size-7 animate-spin text-error">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
              

                
  <div
    class="spinner is-elastic size-7 animate-spin text-slate-500 dark:text-navy-300"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div
    class="spinner is-elastic size-7 animate-spin text-primary dark:text-accent"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div
    class="spinner is-elastic size-7 animate-spin text-secondary dark:text-secondary-light"
  >
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner is-elastic size-7 animate-spin text-info">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner is-elastic size-7 animate-spin text-success">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner is-elastic size-7 animate-spin text-warning">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
  <div class="spinner is-elastic size-7 animate-spin text-error">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      class="h-full w-full"
      fill="none"
      viewBox="0 0 28 28"
    >
      <path
        fill="currentColor"
        fill-rule="evenodd"
        d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14zm-2.764.005c0 6.185-5.014 11.2-11.2 11.2-6.185 0-11.2-5.015-11.2-11.2 0-6.186 5.015-11.2 11.2-11.2 6.186 0 11.2 5.014 11.2 11.2zM8.4 16.8a2.8 2.8 0 100-5.6 2.8 2.8 0 000 5.6z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
              

                
  <!-- Basic Spinner -->
  <div>
    <div
      class="spinner size-5 animate-spin rounded-full border-2 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
    ></div>
    <div
      class="spinner size-7 animate-spin rounded-full border-[3px] border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
    ></div>
    <div
      class="spinner size-10 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
    ></div>
    <div
      class="spinner size-12 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
    ></div>
    <div
      class="spinner size-16 animate-spin rounded-full border-4 border-primary border-r-transparent dark:border-accent dark:border-r-transparent"
    ></div>
  </div>

  <!-- Soft Color Spinner -->
  <div>
    <div
      class="spinner size-5 animate-spin rounded-full border-2 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
    ></div>
    <div
      class="spinner size-7 animate-spin rounded-full border-[3px] border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
    ></div>
    <div
      class="spinner size-10 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
    ></div>
    <div
      class="spinner size-12 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
    ></div>
    <div
      class="spinner size-16 animate-spin rounded-full border-4 border-primary/30 border-r-primary dark:border-accent/30 dark:border-r-accent"
    ></div>
  </div>

  <!-- Grow Spinner -->
  <div>
    <div class="spinner is-grow relative size-5">
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
    </div>
    <div class="spinner is-grow relative size-7">
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
    </div>
    <div class="spinner is-grow relative size-10">
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
    </div>
    <div class="spinner is-grow relative size-12">
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
    </div>
    <div class="spinner is-grow relative size-16">
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
      <span
        class="absolute inline-block h-full w-full rounded-full bg-primary opacity-75 dark:bg-accent"
      ></span>
    </div>
  </div>