Skeleton Shimmer
スケルトンシマー
Generation Prompt
【対象要素】 - コンテンツ読込中のプレースホルダ(スケルトン)に適用する 【演出内容】 - 灰色のバー群の上を、明るいハイライトが左から右へ走り抜け続ける 【品質要件】 - バーは実際のコンテンツの行構成(幅の違い)を模して並べる - ハイライトの周期は1.5秒前後にして、全バーで同期させる - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - Loading placeholders (skeleton screens) [Motion] - A bright highlight sweeps left to right across gray placeholder bars, forever [Quality] - Mirror the real content's line widths in the bars - ~1.5s sweep period, synchronized across bars - Make the loop seamless: the end state must match the start state exactly - With prefers-reduced-motion, stop the animation and show a static finished state
Prompts and demo code are free to use in your own projects. See About.