ローダー & スケルトン

ローダー & スケルトンに分類されるWeb表現技法9件。スケルトンスクリーン、各種スピナー集、プログレスバー、シマー効果など。ライブデモとコピーできるコード付き。

読み込み中はプレースホルダを表示し、データ取得後に実コンテンツへフェードで差し替えるカードUI。商品リストやプロフィールの体感速度向上に使えます。

リング・デュアル・オービット・バー・パルス・キューブの6種を純CSSで実装したスピナー詰め合わせ。用途に合うローディング表現をすぐ選べます。

不規則に進む疑似アップロードをパーセントとMB表示で見せる進捗バー。グラデーションが流れ完了状態も色で表現します。fetch進捗の可視化に最適。

光沢グラデーションが左から右へ流れるプレースホルダのリスト。行ごとに位相をずらし波打たせた、ライトテーマのローディング表現です。

バウンド・チャット入力中・波の3パターンのドットアニメーションを純CSSで実装。軽量で省スペースな待機表現として汎用的に使えます。

SVGリングのstroke-dashoffsetを操作し残り秒を可視化する円形タイマー。完了でリングと数字が赤に変化します。リダイレクトや自動遷移の予告に。

SVGの∞パス上をグラデーションの発光線がstroke-dashで滑らかに周回するローダー。ブランド感のある待機演出として印象的に使えます。

conic-gradientとrequestAnimationFrameでなめらかにカウントアップする円形プログレス。イージングと完了時のグロー演出付き。初回ローディング画面に。

全画面のイントロ画面でブランド名とプログレスバーがカウントアップし、完了するとワイプ（clip-path）で本編コンテンツが現れる遷移演出。読み込みから本編へのつなぎを印象的に見せられます。「もう一度」ボタンでリプレイ可能。