🙃

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

2 min read 3

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

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

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

<div className="flex justify-center">
  <div className="animate-ping h-4 w-4 bg-blue-600 rounded-full"></div>
</div>

アレンジ

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

3つ並べたバージョン

<div className="flex justify-center">
  <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でない場合はclassNameclassに置き換えてください(もしくはCodePenのコードをコピペ)
  • bg-blue-600の部分を好きな色に変更してください
  • h-2w-2を好きな大きさになるように変更してください
  • 真ん中の<div>mx-4をいじれば3つの円の間隔を変更できます

Spinner(スピナー)

<div className="flex justify-center">
  <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">
        <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でない場合はclassNameclassに置き換えてください(もしくはCodePenのコードをコピペ)
  • bg-blue-500の部分を好きな色に変更してください
  • h-10w-10を好きな大きさになるように変更してください

Spinner その2

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

<div className="flex justify-center">
    <div className="animate-spin h-8 w-8 bg-blue-300 rounded-xl"></div>
</div>

アレンジ

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

Discussion

こんにちは、いつも記事を参考にさせて頂いています。
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も用意されるようです。

https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.1

追記

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

更に追記です(すみません...)

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

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

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

ログインするとコメントできます