§15-02Perceived Performance

Shimmer

読み込み中の枠に光が横切るアニメーションを流す。

読み込み中の枠に光を流し、止まっているのではなく処理中だと伝える。スケルトンと組み合わせ、待ち時間の体感を和らげる。

実装のポイント

グラデーションを translateX でアニメーションさせ、width や left を動かさないことで合成レイヤーだけで描画させる。prefers-reduced-motion では静止させる。