🙃

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

2021/11/13に公開

4件

Tailwind CSS

tech

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の部分で角丸の程度を変更してください

Discussion

koyama shigehito

こんにちは、いつも記事を参考にさせて頂いています。
Spinner（スピナー）の部分ですが、

<div class="flex justify-center">
  <div
    class="
      animate-spin
      h-10
      w-10
      border-4 border-blue-500 border-t-transparent
      rounded-full
    "
  ></div>
</div>

でもいけるかもしれません。
ver3ではまだalpha版ですがborder-x / border-yも用意されるようです。

追記

こちらVueで検証したものでした。Reactではできないかもしれません。申し訳ありませんでした。

更に追記です（すみません...）

Tailwind の ver3 だとReactでもborder-t-transparentでいけました。正式リリースされればこちらで利用できるかもしれません。

catnose

おー！貴重な情報をありがとうございます。
v3から片側の線だけ色を変えられるようになるのですね。
追記しておきます。

koyama shigehito

ありがとうございます！
v3はPre-releaseとなっているので仕様の変更があるかもしれませんが、使えるようになると便利だなと思います。

nap5

ハンディでいいですね。Spinner（スピナー）でデモ作ってみました。

簡単ですが、以上です。