スピナー（Spinner）はどんな効果ですか？

回転するローディングスピナー2種。データ取得・画面遷移待ちのUXに。CSSのみの軽量実装。データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く演出です。

SpinnerはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。

Spinner — CSS Effect with AI Prompt

CODE

HTML

<div class="demo-stage"><div class="sp-ring"></div><div class="sp-dual"></div></div>

CSS

.demo-stage { display:flex; align-items:center; justify-content:center; gap:3.5rem; padding:3rem; }
.sp-ring { width:58px; height:58px; border:6px solid #E5E5E5; border-top-color:#E91B89; border-radius:50%; animation:sp-rot .9s linear infinite; }
.sp-dual { width:58px; height:58px; border-radius:50%; border:6px solid transparent; border-top-color:#E91B89; border-bottom-color:#7B37A8; animation:sp-rot 1.2s linear infinite; }
@keyframes sp-rot { to { transform:rotate(360deg); } }

AI PROMPT

Claude Cursor v0

PROMPT

CSSのみのローディングスピナーを作って。リング型は全周border:6px #E5E5E5、border-top-colorだけ#E91B89にしてrotate(360deg)を.9s linear infinite。デュアル型はborder全体transparentでtop/bottomだけ色付き。回転速度を変えて2種類見せる。

スピナー（Spinner）とは

回転するローディングスピナー2種。データ取得・画面遷移待ちのUXに。CSSのみの軽量実装。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

データ取得待ち・画像や動画の読み込み中・ページ遷移中など、待ち時間のつなぎに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。