CSS UI PATTERNS · LOADING STATE

CSS Skeleton Loading Builder

読み込み中の形と動きを作る。完成後の切り替わりまで確認する。

01

LIVE SKELETON BUILDER

表示する形と動きを選ぶ

2 LAYOUTS · 4 MOTIONS

PREVIEW

カードの読み込み

SHIMMER
studio.local / latestLOADING

STUDIO JOURNAL ISSUE 089

Ideas in progress.

最近の記事を表示しています。

押すと1.6秒後に完成した内容へ切り替わります。

02

LOADING → CONTENT

完成後のUIにつなげる

01 / MATCH THE SHAPE

完成後の配置に合わせる

画像や見出しが入る場所と、おおよその大きさを合わせます。

02 / MARK THE STATE

読み込み状態を伝える

骨組みは読み上げ対象から外し、状態は短いテキストで知らせます。

03 / REPLACE

内容が届いたら置き換える

スケルトンを残さず、実際のカードやリストへ切り替えます。