Tailwind CSS で処理中のローディングアニメーションを追加する

要約
Tailwind CSS の animate-spin クラスを用いて、ボタンにローディングアニメーションを追加する方法を紹介します。アイコンはSVGを使います。アニメーション付きアイコンを使用することで、処理中であることをユーザーに視覚的に伝えることができます。
意見はこのエリアに表示されます
アイキャッチ画像

最新の Tailwind CSS のバージョンをお使いください。

ボタンにローディングアニメーションを追加する

以下のコードは、ボタンにローディングアニメーションを追加する例です。ボタン内部に SVG アイコンを配置し、animate-spin クラスを用いて回転するアニメーションを設定しています。

  • animate-spin クラス: Tailwind CSS のユーティリティクラスで、アイコンに回転アニメーションを追加します。
  • disabled 属性: ボタンが操作できない状態を示し、ユーザーが誤って押すことを防ぎます。
  • flex items-center: ボタン内のアイコンとテキストを水平に中央揃えにするためのクラスです。

点滅させる

uploaded image
uploaded image

他のローディングアニメーションとして、@keyframes を使ってカスタムアニメーションを作成することもできます。また、Tailwind CSS のプラグインを活用して、複雑なアニメーションを追加することも可能です。

  • animate-pulse クラス: ボタン全体にパルスアニメーションを適用し、処理中であることを強調します。

これらの例を応用して、さまざまな場面でユーザーに視覚的なフィードバックを提供することができます。

参考

Explore More
関連記事はありません。