yuheijotaki.com

Loading Placeholder いろいろ

オリジナルは不明ですがWebやアプリでよくある画像とテキストの読み込み前に表示されるグレーのプレースホルダー、
Loading Placeholder や Content Placeholders というふうによばれているんですね。

実装する必要がありそうなのでPC(Webブラウザ版)にて各サービスをキャプチャしてみました。
思ったよりもPCだとあまり実装されていなくてアプリ寄りの実装が多いのかなと思いました。

Backlog

f:id:jotaki:20190729094810p:plain

アニメーションなし、角丸ラインスタイル

Dribbble

f:id:jotaki:20190729094816p:plain

サムネイルクリックした際のモーダル表示時にでます
ラインはグレーの濃淡アニメーション、画像エリアはボールがバウンドする

Dropbox

f:id:jotaki:20190729094821p:plain

ファイル一覧のページ
アニメーションなしっぽい、コントラスト薄め

Facebook

f:id:jotaki:20190729094828p:plain

一番メジャーっぽいやつ
コンテンツ全体にラインではなく3行固定、画像エリアはブランク

Instagram

f:id:jotaki:20190729094833p:plain

PCのおすすめユーザー箇所
スマホは画像部分がほやけ→くっきりなる

Qiita

f:id:jotaki:20190729094836p:plain

Qiitaはサイドバーのおすすめ記事やランキングなるけど記事一覧はならないっぽい
(読み込み早いだけかも)

Slack

f:id:jotaki:20190729094839p:plain

読み込み時にメッセージが表示されてたときは、もう少し派手に(わかりやすく)プレースホルダーがあった気がしますが、
いまはユーザーごとに読み込みされるときにこんな感じになる