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