最新の Tailwind CSS のバージョンをお使いください。
ボタンにローディングアニメーションを追加する
以下のコードは、ボタンにローディングアニメーションを追加する例です。ボタン内部に SVG アイコンを配置し、animate-spin クラスを用いて回転するアニメーションを設定しています。
animate-spinクラス: Tailwind CSS のユーティリティクラスで、アイコンに回転アニメーションを追加します。disabled属性: ボタンが操作できない状態を示し、ユーザーが誤って押すことを防ぎます。flex items-center: ボタン内のアイコンとテキストを水平に中央揃えにするためのクラスです。
点滅させる
他のローディングアニメーションとして、@keyframes を使ってカスタムアニメーションを作成することもできます。また、Tailwind CSS のプラグインを活用して、複雑なアニメーションを追加することも可能です。
animate-pulseクラス: ボタン全体にパルスアニメーションを適用し、処理中であることを強調します。
これらの例を応用して、さまざまな場面でユーザーに視覚的なフィードバックを提供することができます。
参考
