ローディングパターン

このツールでできること

• ローディングパターンでは、Spinner、Progress Bar、Skeleton、Shimmer、Optimistic UI、Lazy Loadの使い分けを表で確認できます。
• 関連する観点として ローディングパターン、loading patterns、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Spinner 行で、完了時刻が読めない短い待機に使う表示を確認します。
2. Progress Bar 行は、アップロードや処理率など進捗を数値化できる場合に参照します。
3. Skeleton と Shimmer の行を見て、読み込まれる構造を先に見せるか、動きを足すかを分けます。
4. Optimistic UI と Lazy Load の行で、先行表示と遅延読込の違いを整理します。

入力例・出力例

よくある利用シーン

• API待ちの画面で、スピナーだけにするかスケルトンを置くか判断したいとき。
• 進捗率が取れる処理と取れない処理を、表示パターンから分けたいとき。
• いいねや保存など、先行表示してよい操作かレビューするとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• ローディングパターン、loading patterns、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• ローディングパターンの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール