Spin
スピン
どんな動き？
要素が中心を軸にして一定速度で360度回転し続けるシンプルなループアニメーション。ローディングインジケーターの定番表現であるほか、アイコンや装飾的な図形に適用してページにリズムを持たせる用途でも使われる。速度を変えるだけで印象が大きく変わる。
よく使う場所
ローディングインジケーターアイコン装飾図形
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
※生成AIは英語のアニメーション用語を指定する方が意図通りの崩れにくいコードを出力するため、プロンプトは英語で構成しています。そのままAIのチャット欄に貼り付けて使えます。
Rotate an element a full 360 degrees continuously at a constant speed.Trigger:
Load (starts automatically and loops continuously).
Initial state:
rotate: 0deg
Animation:
The element rotates smoothly and continuously at a constant speed with no easing pause.
Final state:
rotate: 360deg (visually identical to 0deg, loops seamlessly)
Timing:
duration: 1.5s, easing: linear, iteration-count: infinite.実装方法の候補
この動きは以下の技術で実装できます。
CSS animation (infinite, linear)
別名・関連ワード
Rotate LoopSpinnerContinuous Rotation