{ "id": "motion:motion-circular-progress", "slug": "motion-circular-progress", "kind": "motion", "title": { "ja": "円形プログレス", "en": "Circular scroll progress" }, "aiName": "Circular scroll progress", "summary": { "ja": "円が読了量を示し、頂上に戻れる", "en": "A ring shows how far you have read, and lets you return to the top" }, "number": 42, "group": "ambient", "techniques": [ "scroll-progress", "svg" ], "rules": [ { "ja": "輪の進みはページ全体のスクロール量と一致し、最後の 1 段で 100% に届く", "en": "The ring tracks whole-page scroll and reaches 100% at the bottom" }, { "ja": "動きを減らす設定を除き、「↑」は 90% を超えたときだけ出し、それ以外では押せない", "en": "Except under reduced motion, the up arrow appears only above 90% and is not clickable below it" }, { "ja": "動きを減らす設定では、輪は完成した状態で止めて見せる", "en": "With reduced motion, the ring stays drawn complete" } ], "reproduction": { "prompt": { "ja": "円形プログレス — Circular scroll progress\n\n画面の右下に、直径 72px の円形プログレスを固定して置く。外側の輪は SVG の circle で、stroke-dasharray を 1（pathLength=\"1\"）にし、stroke-dashoffset を 1 から 0 へ動かして、ページ全体のスクロール量 0〜100% に合わせて輪を時計回りに描く。\n輪の中央には現在の百分率を「45%」のように表示し、等幅の数字を使う。\n読了量が 90% を超えたら中央の表示を「↑」に切り替え、押すと先頭へ滑らかにスクロールして戻る（動きを減らす設定では即時）。\n輪の線は --accent、地の輪は --rule で描き、色は :root の名前だけを使う。CSS と素の JavaScript だけで実装し、ライブラリは使わない。\n\n外すと崩れる点:\n- 輪の進みはページ全体のスクロール量と一致し、最後の 1 段で 100% に届く\n- 動きを減らす設定を除き、「↑」は 90% を超えたときだけ出し、それ以外では押せない\n- 動きを減らす設定では、輪は完成した状態で止めて見せる\n\n動く実物（1 ファイルで完結する HTML）: https://design-vault.pages.dev/designs/motion-circular-progress/demo.html", "en": "Circular scroll progress — Circular scroll progress\n\nFix a 72px circular progress indicator at the bottom-right of the screen. The outer ring is an SVG circle with pathLength=\"1\" and stroke-dasharray 1, and its stroke-dashoffset moves from 1 to 0 so the ring draws clockwise as the page scroll goes from 0% to 100%.\nShow the current percentage in the centre in tabular numerals, for example \"45%\".\nOnce progress passes 90%, swap the centre to \"↑\"; pressing it scrolls smoothly back to the top (instantly when reduced motion is set). Draw the progress stroke in --accent and the track in --rule, and use only the named colour roles.\nImplement with CSS and plain JavaScript only; do not use a library.\n\nDo not drop:\n- The ring tracks whole-page scroll and reaches 100% at the bottom\n- Except under reduced motion, the up arrow appears only above 90% and is not clickable below it\n- With reduced motion, the ring stays drawn complete\n\nA working example (one self-contained HTML file): https://design-vault.pages.dev/designs/motion-circular-progress/demo.html" }, "code": { "url": "https://design-vault.pages.dev/designs/motion-circular-progress/demo.html", "html": "\n\n\n\n\n42 円形プログレス — Circular scroll progress\n\n\n\n
\n
\n

42

\n

円形プログレス

\n

Circular scroll progress

\n

円が読了量を示し、頂上に戻れる

\n

SCROLL ↓

\n
\n
\n\n
\n
\n
\n

Section 1

\n

見出しが入ります

\n

本文のダミーです。右下の輪が、どこまで読んだかを示します。

\n
\n
\n
\n

Section 2

\n

見出しが入ります

\n

本文のダミーです。読み進めるほど、輪の線が伸びていきます。

\n
\n
\n
\n

Section 3

\n

見出しが入ります

\n

本文のダミーです。ここまでの量が、輪の中の百分率で読めます。

\n
\n
\n
\n

Section 4

\n

見出しが入ります

\n

本文のダミーです。終わり近くで、輪の中の印が矢印に変わります。

\n
\n
\n
\n

Section 5

\n

見出しが入ります

\n

本文のダミーです。矢印を押すと、先頭まで戻ります。

\n
\n
\n
\n
\n\n
\n \n \n \n \n 0%\n \n
\n\n\n\n\n\n\n" } }, "license": "Original", "catalogVersion": 1, "designSchemaVersion": 2, "capabilities": [ "live-preview", "copy-prompt", "get-code" ], "reusePolicy": "construction-reuse", "urls": { "ja": "https://design-vault.pages.dev/designs/motion-circular-progress", "en": "https://design-vault.pages.dev/en/designs/motion-circular-progress", "json": "https://design-vault.pages.dev/ai/assets/motion-circular-progress.json", "designJson": null } }