Spinner

Default

<div class="jumpu-spinner">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20"></circle>
  </svg>
</div>

Size

<div class="flex items-center">
  <div class="jumpu-spinner h-4 w-4">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20"></circle>
    </svg>
  </div>
  <div class="jumpu-spinner h-6 w-6">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20"></circle>
    </svg>
  </div>
  <div class="jumpu-spinner h-8 w-8">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20"></circle>
    </svg>
  </div>
  <div class="jumpu-spinner h-16 w-16">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20"></circle>
    </svg>
  </div>
</div>

Color

<div class="jumpu-spinner text-primary-500">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20"></circle>
  </svg>
</div>
<div class="jumpu-spinner text-red-400">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20"></circle>
  </svg>
</div>
<div class="jumpu-spinner text-purple-400">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20"></circle>
  </svg>
</div>
<div class="jumpu-spinner text-yellow-600">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20"></circle>
  </svg>
</div>
<div class="jumpu-spinner text-pink-500">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20"></circle>
  </svg>
</div>
<div class="jumpu-spinner text-green-500">
  <svg viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20"></circle>
  </svg>
</div>