スケルトンローディングジェネレーター（CSS）

スケルトンローディングジェネレーター（CSS）: 用途

スケルトンスクリーンは、コンテンツの読み込み中にその場所に表示される灰色の骨組みで、FacebookやYouTubeで使われています。これから表示されるものの形を見せ、待ち時間を短く感じさせ、コンテンツが表示されたときにページが跳ねるのを防ぎます。

テンプレート（画像付きカード、アバター付きリスト、プロフィール、段落）、繰り返す回数、色、角丸を選びます。アニメーションの光沢は背景だけを動かし、動きを減らす設定の人にはオフになります。ブロックにはaria-busyと、スクリーンリーダー向けの読み込み中テキストが使われます。

使い方

1. テンプレートと繰り返す回数を選びます。
2. 色、角丸、光沢を調整します。
3. コードをコピーして、コンテンツが届いたら置き換えます。

使うタイミング

• APIで読み込む商品リスト。
• フィードやコメントのリスト。
• ダッシュボードやWebシステム。

よくある質問

なぜ読み込み中アイコンではなくスケルトンなのですか？

スケルトンはこれから表示されるものの形を見せるので、コンテンツが表示されたときにページが跳ねず、待ち時間が短く感じられます。カード、リスト、プロフィールに向いています。フォームの送信のような素早い操作には、ボタン自体のインジケーターで十分です。

スクリーンリーダーを使う人にはどうなりますか？

ブロックにはaria-busy=trueと、隠しテキスト「読み込み中」が付きます。四角形は装飾なのでaria-hiddenです。コンテンツが届いたら、スケルトンをコンテンツに置き換えてaria-busyを外してください。

アニメーションの光沢は重くなりませんか？

いいえ。アニメーションは各四角形の背景だけを動かします。システムで動きを減らす設定にしている人には、光沢はオフになり、色だけが残ります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール