tailwind css製loading animation samples

Tailwind CSSでお手軽ローディングアニメーションに刺激を受けたので、それっぽいloading animationを作ってみた。

準備

現状のtailwindではanimation-delayプロパティはutility classとして用意されていません。
したがって下記のように@layerで追加するか、pluginを利用して追加します。

@layer utilities {
  .animation-delay-100 {
    animation-delay: 0.1s;
  }
  .animation-delay-200 {
    animation-delay: 0.2s;
  }
  .animation-delay-400 {
    animation-delay: 0.4s;
  }
}

dots ver1

<div class="flex justify-center my-20 space-x-3">
  <div class="animate-ping  h-2 w-2 bg-blue-600 rounded-full"></div>
  <div class="animate-ping  h-2 w-2 bg-blue-600 rounded-full animation-delay-200"></div>
  <div class="animate-ping  h-2 w-2 bg-blue-600 rounded-full animation-delay-400"></div>
</div>

メモ

• reactの場合はclassをclassNameに置き換えてください

dots ver2

<div class="flex justify-center my-20 space-x-2">
  <div class="animate-bounce  h-2 w-2 bg-blue-600 rounded-full"></div>
  <div class="animate-bounce  h-2 w-2 bg-blue-600 rounded-full animation-delay-200"></div>
  <div class="animate-bounce  h-2 w-2 bg-blue-600 rounded-full animation-delay-400"></div>
</div>

メモ

• reactの場合はclassをclassNameに置き換えてください

dots ver3

<div class="flex justify-center my-20 space-x-3">
  <div class="animate-ping  h-2 w-2 bg-blue-600 rounded-full animation-delay-500"></div>
  <div class="animate-ping  h-2 w-2 bg-blue-600 rounded-full"></div>
  <div class="animate-ping  h-2 w-2 bg-blue-600 rounded-full animation-delay-500"></div>
</div>

メモ

• reactの場合はclassをclassNameに置き換えてください

bars ver1

<div class="flex justify-center my-20 space-x-2">
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-400"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-200"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-200"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-400"></div>
</div>

メモ

• reactの場合はclassをclassNameに置き換えてください

bars ver2

<div class="flex justify-center my-20 space-x-2">
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-100"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-200"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-300"></div>
  <div class="animate-ping  h-4 w-1 bg-blue-600 rounded-full animation-delay-400"></div>
</div>

メモ

• reactの場合はclassをclassNameに置き換えてください