Indeterminate Progress
不確定プログレス
Generation Prompt
【対象要素】 - 進捗が読めない処理中のプログレスバーに適用する 【演出内容】 - 細いバーの中を、短いバーが左から右へ走り抜け続ける - 端まで達したら左から再登場する 【品質要件】 - 走るバーの長さはトラックの1/3程度にする - 加速と減速を付けて、機械的な等速にしない - ループの継ぎ目が分からないよう、終了時の状態と開始時の状態を完全に一致させる - prefers-reduced-motion 時はアニメーションを止め、静止した完成状態で表示する
[Target] - A progress bar for tasks of unknown length [Motion] - A short bar runs through the track left to right, re-entering from the left after it exits [Quality] - The runner is about 1/3 of the track length - Ease in and out; avoid mechanical constant speed - 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.