ローディングアニメーション
エンジニアのための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
歯車
引用・参考リンク
Related Cheatsheets
- 画像エフェクト-CSSで実現できる画像エフェクトのチートシートです。filter、clip-path、blend-modeなどを使った視覚効果と、AI画像生成用のプロンプト例をまとめました。
- テキストアニメーション-CSSで実現できるテキストアニメーションのチートシートです。フェードイン、スライド、タイプライター、グリッチ、ネオン効果など、様々なテキストエフェクトをライブプレビューで確認できます。
- CSSアニメーション-汎用的なCSSアニメーションのチートシートです。入場・退場・注目・変形・特殊効果・継続・ローディング・ホバーなど、様々なアニメーションをライブプレビューで確認できます。
- UX心理学-UXデザインに活用できる心理学の法則・原則をまとめたチートシートです。認知・知覚、意思決定バイアス、行動心理、社会心理など、ユーザー体験を向上させるための心理学的知見を網羅しています。
Related Goods
WebTerm - Recommended tools
WebTermは、ブラウザでLinuxコマンド・Gitコマンドを安全に実行でき、チュートリアル式で学べるターミナルサンドボックスです。
AIコーディングツールの普及に伴い、CLIの基礎知識を身につける重要性は増しています。実際のターミナルを操作するのに抵抗がある方でも、WebTermはローカル環境を壊す心配がありません。「会員登録不要・無料」で利用でき、学習環境として最適です。
WebTerm
Browser Terminal Sandbox for Learning CLI
All Cheatsheets