Tailwind CSSでお手軽ローディングアニメーション

Talewind CSSでローディング・アニメーションを表示したくなったのですが、ググってもちょうど良いサンプルが見つかりませんでした。

というわけでコピペで簡単に使えるサンプルコードをいくつか考えてみました。あまりクオリティが高いものではないですが「Tailwind CSSでとりあえず何かローディング中っぽい表示にしたい」という場合にご自由にコピペしてお使いください。

波紋が広がるアニメーション

<div className="flex justify-center" aria-label="読み込み中">
  <div className="animate-ping h-4 w-4 bg-blue-600 rounded-full"></div>
</div>

アレンジ

• Reactでない場合はclassNameをclassに置き換えてください（もしくはCodePenのコードをコピペ）
• bg-blue-600の部分を好きな色に変更してください
• h-4とw-4を好きな大きさになるように変更してください

3つ並べたバージョン

<div className="flex justify-center" aria-label="読み込み中">
  <div className="animate-ping h-2 w-2 bg-blue-600 rounded-full"></div>
  <div className="animate-ping h-2 w-2 bg-blue-600 rounded-full mx-4"></div>
  <div className="animate-ping h-2 w-2 bg-blue-600 rounded-full"></div>
</div>

アレンジ

• Reactでない場合はclassNameをclassに置き換えてください（もしくはCodePenのコードをコピペ）
• bg-blue-600の部分を好きな色に変更してください
• h-2とw-2を好きな大きさになるように変更してください
• 真ん中の<div>のmx-4をいじれば3つの円の間隔を変更できます

Spinner（スピナー）

<div className="flex justify-center" aria-label="読み込み中">
  <div className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full border-t-transparent"></div>
</div>

こちらはTailwind CSSのv3〜に対応した書き方です。v2を使っている場合は下記をご覧ください。

Tailwind CSS v2を使っている場合

v3より前のバージョンでは一片の線の色だけを変えるborder-t-transparentが使えないため、style={{ borderTopColor: "transparent" }}のような書き方をする必要があります。

<div className="flex justify-center" aria-label="読み込み中">
        <div
          className="animate-spin h-10 w-10 border-4 border-blue-500 rounded-full"
          style={{ borderTopColor: "transparent" }}
        ></div>
</div>

※ Reactでない場合はstyle={}の部分をstyle="border-top-color: transparent"に置き換えてください

アレンジ

• Reactでない場合はclassNameをclassに置き換えてください（もしくはCodePenのコードをコピペ）
• bg-blue-500の部分を好きな色に変更してください
• h-10とw-10を好きな大きさになるように変更してください

Spinner その2

モニモニした感じのSpinnerにしてみました。

<div className="flex justify-center" aria-label="読み込み中">
    <div className="animate-spin h-8 w-8 bg-blue-300 rounded-xl"></div>
</div>

アレンジ

• Reactでない場合はclassNameをclassに置き換えてください（もしくはCodePenのコードをコピペ）
• bg-blue-300の部分を好きな色に変更してください
• rounded-xlの部分で角丸の程度を変更してください