ローディングアニメーション
エンジニアのためのWebチートシート
CSSで実現できるローディングアニメーションのチートシートです。スピナー、ドット、パルス、バー、スケルトン、プログレスバーなど、様々なローディング表現をライブプレビューで確認できます。
Spinners
Simple Spinner
シンプルな円形スピナー
Dual Ring
二重リングスピナー
Dotted Spinner
点線スピナー
Gradient Spinner
グラデーションスピナー
Split Ring
分割リングスピナー
Arc Spinner
弧スピナー
Rotating Square
回転する四角形
Chasing Dots
追いかけるドット
Circle Notch
切り欠き円
Rotating Plane
回転する平面
Dots
Bouncing Dots
跳ねるドット
Fading Dots
フェードするドット
Scaling Dots
拡大縮小ドット
Wave Dots
波ドット
Typing Dots
タイピングドット
Orbit Dots
軌道ドット
Flipping Dots
回転ドット
Moving Dots
移動ドット
Pulse / Ripple
Simple Pulse
シンプルパルス
Ripple
リップル（波紋）
Ping
ピング
Double Pulse
ダブルパルス
Radar
レーダー
Heartbeat
ハートビート
Bars
Bouncing Bars
跳ねるバー
Scaling Bars
拡大縮小バー
Wave Bars
波バー
Equalizer
イコライザー
Sliding Bars
スライドバー
Rotating Bars
回転バー
Folding Bars
折りたたみバー
Stacking Bars
積み上げバー
Skeleton
Text Skeleton
テキストスケルトン
Card Skeleton
カードスケルトン
Avatar Skeleton
アバタースケルトン
List Skeleton
リストスケルトン
Image Skeleton
画像スケルトン
Shimmer Effect
シマー効果
Progress
Linear Progress
線形プログレス
Circular Progress
円形プログレス
Indeterminate Bar
不確定バー
Gradient Progress
グラデーションプログレス
Striped Progress
ストライププログレス
Segmented Progress
セグメントプログレス
Special
Hourglass
砂時計
Infinity
無限大
Cube
キューブ
Windmill
風車
DNA Helix
DNAヘリックス
Gear
歯車