【CodePen】ローディングアニメーションのアイデア12選

💡 実装のポイント
8種類とも<animateTransform>や<animate>といったSVG標準のアニメーション要素（SMIL）で動いており、CSSのkeyframesもJSも使っていない構成。色はsvg path, svg rect { fill: #FF6700; }の1行で全パターン一括変更できる。クラスは.loader--style1〜.loader--style8で完全に独立しているので、好きな番号のブロックだけ抜き出せば単体でも使える。

💡 実装のポイント
プリプロセッサ不使用のプレーンCSSのみで構成され、JSも不要。spin・spin3D・pulseなど@keyframesごとに役割が分かれており、.circle-borderや.blue-orbitといったクラスもパターンごとに独立しているので1つだけ抜き出しやすい。色はグラデーションのrgba()値を変更するだけで着せ替え可能。

💡 実装のポイント
Pug＋SCSSで書かれており、SCSS変数$spCol（色）を1つ変更するだけで12パターン全部に反映される設計。.sp-circle〜.sp-hydrogenのクラスごとに独立しているので、気に入った1個だけ抜き出して使うことも可能。ただしrgba($spCol, ...)などSCSS関数を使っているため、そのままではCSSとして動かず「View Compiled CSS」でコンパイル後のコードを書き出す必要がある。

💡 実装のポイント
スピナー・ドット・バー・SVGリング・スケルトンなど24種類がCSSカスタムプロパティ（--size・--speed・--accent）で一括管理されており、JSのスライダーで全パターンのサイズ・速度・色を同時に変更できる仕組み。prefers-reduced-motionへの配慮やポーズ機能（body[data-paused]）も用意されている。「∞」型のSVGパスだけはCSSでなくgetTotalLength()とrequestAnimationFrameを使ったJS駆動のアニメーションになっている点に注意。

💡 実装のポイント
SCSSのrandom-color()関数で毎回ランダムな配色を生成する仕組みになっており、コンパイルするたびに色味が変わる。固定の配色にしたい場合は各.shaft-loadブロック内のrandom-color()呼び出しを固定の16進カラーに置き換える必要がある。.shaft1〜.shaft10へのanimation-delayのずらし方でバーごとの波打つタイミングを調整している。

💡 実装のポイント
オープンソースの定番スピナー集「SpinKit」を元にしたPen。Haml＋SCSSで書かれており、$spinkit-size（サイズ）と$spinkit-spinner-color（色）の2つのSCSS変数だけで11パターン全部を一括調整できる設計になっている。折り紙のように面が回転する.sk-folding-cubeなど、単体でも使い出のあるパターンが揃っている。

💡 実装のポイント
各スピナーは<span class="◯◯-loader">Loading…</span>という1要素のみのシンプルな構造で、対応していない古いブラウザではテキストの「Loading…」がそのまま表示されるフォールバック仕様。実際のアニメーションCSSはPen内にはなく外部リンクのcss-spinners.cssから読み込まれているため、使う際はリンク先のGitHubリポジトリから該当CSSを別途取得する必要がある。

💡 実装のポイント
Sassで書かれており、デフォルトではanimation-play-state: pausedになっていて:hover時のみrunningに切り替わる仕様（このPenではマウスホバーで確認する体験設計）。実制作で常時再生させたい場合は、この:hoverによる切り替え部分を削除すればよい。バブル・スポーク・スライドなど9種類が独立したクラスで分かれている。

💡 実装のポイント
Pugで「Loading…」の1文字ずつを.preloader__sectorとして自動生成し、rotateY()とtranslateZ()を組み合わせて円周上に配置している構成。perspectiveとtransform-style: preserve-3dを使ったCSS 3D表現で、アイコン系スピナーとは違う「テキストが立体的に回る」ユニークな見せ方ができる。

💡 実装のポイント
SVGの<circle>全体を回すrotateアニメーションと、stroke-dasharray／stroke-dashoffsetを変化させて円弧の長さを伸縮させるアニメーションを組み合わせた、よく見る「成長する円弧」スピナーの実装例。色はstroke="#70c542"の属性値と、keyframes内のstroke指定を両方変更する必要がある。

💡 実装のポイント
Pug＋Stylusで書かれており、8つの.side要素をStylusのsin()／cos()関数で三角関数計算しながら円周上に配置している点が特徴的。JSを使わずプリプロセッサの数式だけで放射状レイアウトを組んでおり、各要素はrotate0〜rotate135の4種のkeyframesを共有しつつ、全体を包む親要素がゆっくり回転する2層構造になっている。

💡 実装のポイント
.bar1〜.bar6それぞれに個別のbackground-colorとマイナス値のanimation-delayを設定し、共通のscaleYkeyframesをずらして再生することでイコライザーのような弾む動きを表現している。バーごとに色が独立しているので、部分的な着せ替えがしやすいシンプルな構成。