Skip to content

LoadingCard

Loading

html
<div class="jumpu-card mx-auto flex h-48 w-96 items-center justify-center">
  <div class="jumpu-spinner">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20"></circle>
    </svg>
  </div>
</div>

Loading with Text

読み込み中です
html
<div
  class="jumpu-card mx-auto flex h-48 w-96 flex-col items-center justify-center"
>
  <div class="mb-4 font-bold">読み込み中です</div>
  <div class="jumpu-spinner">
    <svg viewBox="25 25 50 50">
      <circle cx="50" cy="50" r="20"></circle>
    </svg>
  </div>
</div>