【コピペOK】プログレスバー css アニメーション 9選

Q: scroll()にまだ対応していないブラウザではどうなりますか？

animation-timeline: scroll()を使う6つ(01・02・04・05・06・09)は@supports (animation-timeline: scroll())で囲んであるため、対応がなければ中のアニメーションはただ適用されません。残り3つ(03・07・08)はもともとJSでスクロール位置を判定する方式です。zipのreact/版は9つ全部についてJSで同じ値を計算し直しているので、CSSの代わりにこちらのコンポーネントを使えばFirefoxを含むすべてのブラウザで進捗が動きます。

2026-09-10 · Godrich · 9種 · 8分で読める

スクロール SCSS CSSのみスクロール LP

プログレスバー css アニメーションは、スクロールした量だけを手がかりに「今どこまで読んだか」を見せるCSSの部品です。CSSだけ・JS不要で、上部バー・円形バッジ・点ナビ・縦バー・文字塗り・数値・章ステップ・目次・残り時間の9種類を集めました。

01 scroll-progress-indicator-top-bar

02 scroll-progress-indicator-ring-badge

03 scroll-progress-indicator-section-dots

04 scroll-progress-indicator-side-rail

05 scroll-progress-indicator-text-fill

06 scroll-progress-indicator-percent-counter

07 scroll-progress-indicator-chapter-steps

08 scroll-progress-indicator-toc-highlight

09 scroll-progress-indicator-reading-time

自動再生 · タイルを押すとその項目へ · すべて1つのzip

01 上部の細いバー
02 円形リングバッジ
03 セクションドットナビ
04 サイド縦バー
05 文字塗りつぶし
06 数値パーセント
07 章ステップ
08 目次ハイライト
09 残り読了時間

9つは「スクロールダウンアニメーション css」のような誘導の矢印ではなく読んだ量そのものを見せる部品で、人気順ではなく読者が意識せずに視界へ入る場所から並べました。画面の端でいつも見えるもの(01〜04)の次に、本文の中で直接目に入るもの(05〜06)、最後に記事の構造そのものを説明するもの(07〜09)です。01・02・04・05・06・09の6つはanimation-timeline: scroll()ひとつだけでスクリプトなしに動き、03・07・08の3つはスクロール位置に応じてJSがクラスを切り替える方式です。scroll()をまだ使えないブラウザ向けの代替版は落とし穴の章にまとめてあります。進み具合ではなく要素を順番に出したい場合は順次表示アニメーションを先に見るほうが早く、横方向の進行はCSSカルーセルが引き受けます。

01上部の細いバー

scroll(root)ひとつで動く

画面最上部に張り付いた3pxのバーが、読んだ分だけ左から満ちていきます。実装はanimation-timeline: scroll(root)ひとつで、JavaScriptは使いません。長い記事のヘッダー直下や、チュートリアル文書の冒頭に向いています。

<main class="stage">
  <div class="track" role="progressbar" aria-label="読了進捗" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <div class="bar is-demo"></div>
  </div>
  <div class="page">
    <div class="page__block"></div>
    <div class="page__block"></div>
    <div class="page__block short"></div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개. 변형은 이것만 바꾼다 ──────────────────────────
$thickness: 3px;                                   // 바 두께. 굵게 6px
$color: $subject-blue;                              // 채워진 구간 색
$track: rgba(255, 255, 255, .16);                    // 안 읽은 구간

@include stage($stage-ink);

.track {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: $thickness;
  background: $track;
}

.bar {
  height: 100%;
  width: 100%;
  background: $color;
  transform: scaleX(0);
  transform-origin: left; // 규칙8: 진행바 left 채움

  // 실제 사용: 문서 스크롤 진행률이 곧 바 길이 (Chrome·Edge 115+ · Safari 26+ · Firefox 158+ 플래그, 편브리프 표)
  @supports (animation-timeline: scroll()) {
    animation: fill linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fill { to { transform: scaleX(1); } }

// ── 데모(.is-demo): 스크롤 없이 2초 루프로 흉내 ────────────────
.bar.is-demo { animation: fill-loop $dur-loop linear infinite; }
@keyframes fill-loop {
  0%   { transform: scaleX(0); }
  92%  { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

.page { padding: $sp-10 $sp-6 0; }
.page__block {
  height: $sp-6;
  margin: 0 0 $sp-4;
  border-radius: $r-sm;
  background: rgba(255, 255, 255, .12);
  &.short { width: 55%; }
}

// ── 접근성: 움직임 줄이기 — 다 채워진 상태로 고정 ────────────
@media (prefers-reduced-motion: reduce) {
  .bar, .bar.is-demo { animation: none !important; transform: scaleX(1); }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.track {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.16);
}

.bar {
  height: 100%;
  width: 100%;
  background: #2f6df6;
  transform: scaleX(0);
  transform-origin: left;
}
@supports (animation-timeline: scroll()) {
  .bar {
    animation: fill linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes fill {
  to {
    transform: scaleX(1);
  }
}
.bar.is-demo {
  animation: fill-loop 2s linear infinite;
}

@keyframes fill-loop {
  0% {
    transform: scaleX(0);
  }
  92% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}
.page {
  padding: 40px 24px 0;
}

.page__block {
  height: 24px;
  margin: 0 0 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}
.page__block.short {
  width: 55%;
}

@media (prefers-reduced-motion: reduce) {
  .bar, .bar.is-demo {
    animation: none !important;
    transform: scaleX(1);
  }
}

import { useEffect, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./TopBar.module.scss";

export type TopBarProps = {
  /** 바 두께 (기본 3px) */
  thickness?: number;
  /** 바 색 */
  color?: string;
};

type Vars = CSSProperties & { "--thickness"?: string; "--color"?: string };

// 실제 쓰임: 문서 스크롤 비율을 window scroll 로 재서 --scale 에 반영한다.
// scroll() 타임라인을 쓸 수 있는 브라우저(Chrome·Edge 115+, Safari 26+)에서는 CSS 만으로도 되지만,
// React 컴포넌트는 아직 지원이 갈린 Firefox 를 포함해 항상 움직여야 하므로 스크롤 리스너로 재계산한다.
export default function TopBar({ thickness = 3, color = "#2f6df6" }: TopBarProps) {
  const [scale, setScale] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setScale(max > 0 ? Math.min(1, window.scrollY / max) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const vars: Vars = { "--thickness": `${thickness}px`, "--color": color };

  return (
    <div className={styles.track} style={vars} role="progressbar" aria-label="Reading progress"
         aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(scale * 100)}>
      <div className={styles.bar} style={{ transform: `scaleX(${scale})` }} />
    </div>
  );
}

新しいタブで開く

01 · 上部の細いバー — 計測累積面積 1.0% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scroll()3px왼쪽 정렬

長い記事のヘッダー直下に

.bar {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;

  @supports (animation-timeline: scroll()) {
    animation: fill linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fill { to { transform: scaleX(1); } }

02円形リングバッジ

「css プログレスバー円」をconic-gradientで

画面右下に浮かぶ円形バッジが、conic-gradientのリングで読んだ分だけ満ちていきます。@property --pを数値として登録しているので、リングの角度がなめらかに補間されます。フローティングのトップへ戻るボタンと組み合わせると、ひとつのボタンで移動と進捗表示を兼ねられます。

<main class="stage">
  <div class="badge is-demo" role="progressbar" aria-label="トップへ戻る" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <span class="badge__inner"><span class="badge__arrow" aria-hidden="true"></span></span>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$size: 56px;                                        // 배지 지름
$color: $subject-ink;                               // 링 색
$duration: $dur-loop;                               // 한 바퀴(스크롤 전체) 도는 시간

@include stage($stage-yellow);

// 정수라야 링 각도가 매끄럽게 보간된다
@property --p {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.badge {
  --p: 0;
  position: fixed;
  right: $sp-6; bottom: $sp-6;
  width: $size; height: $size;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient($color calc(var(--p) * 1%), $stage-paper 0);
  box-shadow: $shadow-raised;

  // 실제 사용: 링 배지는 플로팅 위로가기 버튼에 흔히 결합된다
  @supports (animation-timeline: scroll()) {
    animation: fill-ring linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fill-ring { from { --p: 0; } to { --p: 100; } }

.badge.is-demo { animation: fill-ring-loop $duration linear infinite; }
@keyframes fill-ring-loop {
  0%   { --p: 0; }
  92%  { --p: 100; }
  100% { --p: 100; }
}

.badge__inner {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: $stage-paper;
  display: grid;
  place-items: center;
}
.badge__arrow {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid $subject-ink;
}

@media (prefers-reduced-motion: reduce) {
  .badge, .badge.is-demo { animation: none !important; --p: 100; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --p {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
.badge {
  --p: 0;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#17141a calc(var(--p) * 1%), #ffffff 0);
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
}
@supports (animation-timeline: scroll()) {
  .badge {
    animation: fill-ring linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes fill-ring {
  from {
    --p: 0;
  }
  to {
    --p: 100;
  }
}
.badge.is-demo {
  animation: fill-ring-loop 2s linear infinite;
}

@keyframes fill-ring-loop {
  0% {
    --p: 0;
  }
  92% {
    --p: 100;
  }
  100% {
    --p: 100;
  }
}
.badge__inner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  display: grid;
  place-items: center;
}

.badge__arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 9px solid #17141a;
}

@media (prefers-reduced-motion: reduce) {
  .badge, .badge.is-demo {
    animation: none !important;
    --p: 100;
  }
}

import { useEffect, useState } from "react";
import type { CSSProperties, MouseEvent } from "react";
import styles from "./RingBadge.module.scss";

export type RingBadgeProps = {
  /** 배지 지름 (기본 56px) */
  size?: number;
  /** 링 색 */
  color?: string;
  onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
};

type Vars = CSSProperties & { "--size"?: string; "--color"?: string; "--p"?: number };

// 실제 쓰임: 위로가기 버튼과 결합. percent 만큼 conic-gradient 링이 채워진다.
export default function RingBadge({ size = 56, color = "#17141a", onClick }: RingBadgeProps) {
  const [percent, setPercent] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setPercent(max > 0 ? Math.min(100, Math.round((window.scrollY / max) * 100)) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const vars: Vars = { "--size": `${size}px`, "--color": color, "--p": percent };

  return (
    <button
      type="button"
      className={styles.badge}
      style={vars}
      role="progressbar"
      aria-label="Back to top"
      aria-valuemin={0}
      aria-valuemax={100}
      aria-valuenow={percent}
      onClick={(e: MouseEvent<HTMLButtonElement>) => { window.scrollTo({ top: 0, behavior: "smooth" }); onClick?.(e); }}
    >
      <span className={styles.inner}><span className={styles.arrow} /></span>
    </button>
  );
}

新しいタブで開く

02 · 円形リングバッジ — 計測累積面積 0.736% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

conic-gradient@property고정 위치

トップへ戻るボタンと兼ねる

@property --p { syntax: '<number>'; initial-value: 0; inherits: false; }

.badge {
  --p: 0;
  border-radius: 50%;
  background: conic-gradient($color calc(var(--p) * 1%), $stage-paper 0);

  @supports (animation-timeline: scroll()) {
    animation: fill-ring linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fill-ring { from { --p: 0; } to { --p: 100; } }

03セクションドットナビ

IntersectionObserverで判定する

縦に並んだ6つの点のうち、今読んでいるセクションの点だけが拡大して明るくなります。実装ではIntersectionObserverが画面に入ったセクションを判定し、対応する点に.is-activeを付けます。ワンページ構成のストーリーサイトや、ランディングページのセクションナビに向いています。

<main class="stage">
  <nav class="dots is-demo" aria-label="セクションナビゲーション">
    <span class="dot" aria-hidden="true"></span>
    <span class="dot" aria-hidden="true"></span>
    <span class="dot" aria-hidden="true"></span>
    <span class="dot" aria-hidden="true"></span>
    <span class="dot" aria-hidden="true"></span>
    <span class="dot" aria-hidden="true"></span>
  </nav>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;                               // 점 하나가 켜졌다 꺼지는 한 순환
$easing: $ease-out;
$color: $subject-cream;                             // 활성 점 색

@include stage($stage-orange);

.dots {
  position: fixed;
  right: $sp-6; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: $sp-3;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(23, 20, 26, .28);
  transition: transform 200ms $easing, background 200ms $easing;
}

// ── 실제 사용: 섹션이 뷰포트에 들어오는 순간 그 섹션의 점에 .is-active 를 켠다 (IntersectionObserver) ──
.dot.is-active { transform: scale(1.6); background: $color; }

// ── 데모: 점을 순서대로 하나씩 밝힌다 ────────────────────
.dots.is-demo .dot { animation: pulse $duration linear infinite; }
.dots.is-demo .dot:nth-child(1) { animation-delay: 0s; }
.dots.is-demo .dot:nth-child(2) { animation-delay: .333s; }
.dots.is-demo .dot:nth-child(3) { animation-delay: .667s; }
.dots.is-demo .dot:nth-child(4) { animation-delay: 1s; }
.dots.is-demo .dot:nth-child(5) { animation-delay: 1.333s; }
.dots.is-demo .dot:nth-child(6) { animation-delay: 1.667s; }

@keyframes pulse {
  0%, 83.34%, 100% { transform: scale(1);   background: rgba(23, 20, 26, .28); }
  8.33%, 16.66%     { transform: scale(1.6); background: $color; }
}

@media (prefers-reduced-motion: reduce) {
  .dots.is-demo .dot { animation: none !important; }
  .dots.is-demo .dot:first-child { transform: scale(1.6); background: $color; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.dots {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(23, 20, 26, 0.28);
  transition: transform 200ms ease-out, background 200ms ease-out;
}

.dot.is-active {
  transform: scale(1.6);
  background: #fff7e6;
}

.dots.is-demo .dot {
  animation: pulse 2s linear infinite;
}

.dots.is-demo .dot:nth-child(1) {
  animation-delay: 0s;
}

.dots.is-demo .dot:nth-child(2) {
  animation-delay: 0.333s;
}

.dots.is-demo .dot:nth-child(3) {
  animation-delay: 0.667s;
}

.dots.is-demo .dot:nth-child(4) {
  animation-delay: 1s;
}

.dots.is-demo .dot:nth-child(5) {
  animation-delay: 1.333s;
}

.dots.is-demo .dot:nth-child(6) {
  animation-delay: 1.667s;
}

@keyframes pulse {
  0%, 83.34%, 100% {
    transform: scale(1);
    background: rgba(23, 20, 26, 0.28);
  }
  8.33%, 16.66% {
    transform: scale(1.6);
    background: #fff7e6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dots.is-demo .dot {
    animation: none !important;
  }
  .dots.is-demo .dot:first-child {
    transform: scale(1.6);
    background: #fff7e6;
  }
}

import { useEffect, useState } from "react";
import styles from "./SectionDots.module.scss";

export type SectionDotsProps = {
  /** 관찰할 섹션 id 목록 (순서대로) */
  sectionIds: string[];
  /** 활성 점 색 */
  color?: string;
};

// 실제 쓰임: IntersectionObserver 로 지금 뷰포트에 가장 많이 걸친 섹션을 찾아 그 점만 켠다.
export default function SectionDots({ sectionIds, color = "#fff7e6" }: SectionDotsProps) {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const els = sectionIds.map((id) => document.getElementById(id)).filter(Boolean) as HTMLElement[];
    const io = new IntersectionObserver(
      (entries) => {
        const top = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
        if (top) setActive(els.indexOf(top.target as HTMLElement));
      },
      { threshold: [0.3, 0.6] }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [sectionIds]);

  return (
    <nav className={styles.dots} aria-label="Section navigation">
      {sectionIds.map((id, i) => (
        <a
          key={id}
          href={`#${id}`}
          className={`${styles.dot} ${i === active ? styles.active : ""}`}
          style={i === active ? { background: color } : undefined}
          aria-hidden="true"
          tabIndex={-1}
        />
      ))}
    </nav>
  );
}

新しいタブで開く

03 · セクションドットナビ — 計測累積面積 0.683% · 動いたフレーム 21/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scale 1.6배점 6개세로 정렬

ワンページ構成のナビに

const io = new IntersectionObserver((entries) => {
  const top = entries
    .filter((e) => e.isIntersecting)
    .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
  if (top) setActive(sections.indexOf(top.target));
}, { threshold: [0.3, 0.6] });
sections.forEach((el) => io.observe(el));

04サイド縦バー

同じ仕組みを縦方向に

画面右端の細いトラックが、上から下へ向かって読んだ位置ぶんだけ満ちていきます。01の上部バーと同じscroll(root)の仕組みを、縦方向に使っただけです。ドキュメントサイトや、長い技術記事の右余白に向いています。

<main class="stage">
  <div class="rail" role="progressbar" aria-label="読んでいる位置" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
    <div class="rail__fill is-demo"></div>
  </div>
  <div class="page">
    <div class="page__block"></div>
    <div class="page__block"></div>
    <div class="page__block short"></div>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$thickness: 4px;                                    // 레일 두께
$color: $subject-blue;                              // 채워진 구간 색
$track: rgba(23, 20, 26, .1);                       // 안 읽은 구간

@include stage($stage-paper);

.rail {
  position: fixed;
  top: 0; right: 0;
  width: $thickness;
  height: 100%;
  background: $track;
}

.rail__fill {
  width: 100%;
  height: 100%;
  background: $color;
  transform: scaleY(0);
  transform-origin: top; // 규칙8: 세로레일 top 채움

  // 실제 사용: 문서 안에서 지금까지 읽은 위치를 세로로 보여준다
  @supports (animation-timeline: scroll()) {
    animation: fill-y linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fill-y { to { transform: scaleY(1); } }

.rail__fill.is-demo { animation: fill-y-loop $dur-loop linear infinite; }
@keyframes fill-y-loop {
  0%   { transform: scaleY(0); }
  92%  { transform: scaleY(1); }
  100% { transform: scaleY(1); }
}

.page { padding: $sp-10 $sp-8 0 $sp-6; }
.page__block {
  height: $sp-6;
  margin: 0 0 $sp-4;
  border-radius: $r-sm;
  background: rgba(23, 20, 26, .08);
  &.short { width: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__fill, .rail__fill.is-demo { animation: none !important; transform: scaleY(1); }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.rail {
  position: fixed;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: rgba(23, 20, 26, 0.1);
}

.rail__fill {
  width: 100%;
  height: 100%;
  background: #2f6df6;
  transform: scaleY(0);
  transform-origin: top;
}
@supports (animation-timeline: scroll()) {
  .rail__fill {
    animation: fill-y linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes fill-y {
  to {
    transform: scaleY(1);
  }
}
.rail__fill.is-demo {
  animation: fill-y-loop 2s linear infinite;
}

@keyframes fill-y-loop {
  0% {
    transform: scaleY(0);
  }
  92% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}
.page {
  padding: 40px 32px 0 24px;
}

.page__block {
  height: 24px;
  margin: 0 0 16px;
  border-radius: 8px;
  background: rgba(23, 20, 26, 0.08);
}
.page__block.short {
  width: 55%;
}

@media (prefers-reduced-motion: reduce) {
  .rail__fill, .rail__fill.is-demo {
    animation: none !important;
    transform: scaleY(1);
  }
}

import { useEffect, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./SideRail.module.scss";

export type SideRailProps = {
  /** 레일 두께 (기본 4px) */
  thickness?: number;
  /** 채워진 구간 색 */
  color?: string;
};

type Vars = CSSProperties & { "--thickness"?: string; "--color"?: string };

// 실제 쓰임: TopBar 와 같은 계산을 세로(scaleY)로 그린다.
export default function SideRail({ thickness = 4, color = "#2f6df6" }: SideRailProps) {
  const [scale, setScale] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setScale(max > 0 ? Math.min(1, window.scrollY / max) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const vars: Vars = { "--thickness": `${thickness}px`, "--color": color };

  return (
    <div className={styles.rail} style={vars} role="progressbar" aria-label="Reading position"
         aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(scale * 100)}>
      <div className={styles.fill} style={{ transform: `scaleY(${scale})` }} />
    </div>
  );
}

新しいタブで開く

04 · サイド縦バー — 計測累積面積 0.833% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

scaleY우측 4px고정

ドキュメントサイトの右余白に

.rail__fill {
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;

  @supports (animation-timeline: scroll()) {
    animation: fill-y linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fill-y { to { transform: scaleY(1); } }

05文字塗りつぶし

background-clipで切り抜く

見出しの文字色が、読んだ割合だけ左から塗り替わっていきます。background-clip: textで切り抜いたグラデーションを@property --pのパーセンテージで動かしているだけで、画像は一枚も使いません。ヒーローの見出しや、記事タイトルを強調したい場面に向いています。

<main class="stage">
  <h2 class="headline is-demo">読んだ分だけ満ちる見出し</h2>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$color: $subject-blue;                              // 읽은 구간 색
$dim: rgba(255, 255, 255, .32);                     // 안 읽은 구간 색
$duration: $dur-loop;

@include stage($stage-ink);

// 퍼센트라야 그라데이션 경계가 매끄럽게 보간된다
@property --p {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.headline {
  --p: 0%;
  max-width: 80%;
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1.35;
  font-family: inherit;
  background-image: linear-gradient(90deg, $color var(--p), $dim var(--p));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  // 실제 사용: 헤드라인 색이 스크롤 진행률만큼 왼쪽부터 채워진다
  @supports (animation-timeline: scroll()) {
    animation: fill-text linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes fill-text { from { --p: 0%; } to { --p: 100%; } }

.headline.is-demo { animation: fill-text-loop $duration linear infinite; }
@keyframes fill-text-loop {
  0%   { --p: 0%; }
  92%  { --p: 100%; }
  100% { --p: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .headline, .headline.is-demo { animation: none !important; --p: 100%; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --p {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
.headline {
  --p: 0%;
  max-width: 80%;
  margin: 0;
  text-align: center;
  font-weight: 800;
  font-size: clamp(20px, 6vw, 28px);
  line-height: 1.35;
  font-family: inherit;
  background-image: linear-gradient(90deg, #2f6df6 var(--p), rgba(255, 255, 255, 0.32) var(--p));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
@supports (animation-timeline: scroll()) {
  .headline {
    animation: fill-text linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes fill-text {
  from {
    --p: 0%;
  }
  to {
    --p: 100%;
  }
}
.headline.is-demo {
  animation: fill-text-loop 2s linear infinite;
}

@keyframes fill-text-loop {
  0% {
    --p: 0%;
  }
  92% {
    --p: 100%;
  }
  100% {
    --p: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .headline, .headline.is-demo {
    animation: none !important;
    --p: 100%;
  }
}

import { useEffect, useState } from "react";
import type { CSSProperties, ReactNode } from "react";
import styles from "./TextFill.module.scss";

export type TextFillProps = {
  children: ReactNode;
  /** 읽은 구간 색 */
  color?: string;
  /** 안 읽은 구간 색 */
  dim?: string;
};

type Vars = CSSProperties & { "--p"?: string; "--color"?: string; "--dim"?: string };

// 실제 쓰임: 헤드라인 색이 스크롤 진행률만큼 왼쪽부터 채워진다.
export default function TextFill({ children, color = "#2f6df6", dim = "rgba(255,255,255,.32)" }: TextFillProps) {
  const [percent, setPercent] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setPercent(max > 0 ? Math.min(100, (window.scrollY / max) * 100) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const vars: Vars = { "--p": `${percent}%`, "--color": color, "--dim": dim };

  return <h2 className={styles.headline} style={vars}>{children}</h2>;
}

新しいタブで開く

05 · 文字塗りつぶし — 計測累積面積 2.938% · 動いたフレーム 23/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

background-clip:textlinear-gradient두 색

ヒーローの見出しに

@property --p { syntax: '<percentage>'; initial-value: 0%; inherits: false; }

.headline {
  --p: 0%;
  background-image: linear-gradient(90deg, $color var(--p), $dim var(--p));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

06数値パーセント

整数として登録する理由

右上の小さな数字が、スクロールした分だけ0から100まで整数で上がっていきます。@property --numを整数として登録しているので、小数点を挟まずに数字がひとつずつ切り替わります。長いアンケートやチュートリアルの進捗表示に向いています。

<main class="stage">
  <div class="counter" role="status" aria-label="読了進捗">
    <span class="counter__num is-demo" aria-hidden="true"></span>
  </div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$color: $subject-ink;                               // 숫자 색
$duration: $dur-loop;
$easing: linear;                                    // 스크롤과 1:1로 움직이니 linear 가 맞다

@include stage($stage-yellow);

// 정수라야 애니메이션 중간값도 정수로 보간된다 (029 와 같은 기법)
@property --num {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.counter {
  position: fixed;
  top: $sp-6; right: $sp-6;
}

.counter__num {
  --num: 0;
  counter-reset: num var(--num);
  display: block;
  font-weight: 800;
  font-size: clamp(26px, 8vw, 36px);
  line-height: 1;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: $color;

  &::before { content: counter(num) '%'; }

  // 실제 사용: 전체 문서를 스크롤한 비율이 그대로 숫자가 된다
  @supports (animation-timeline: scroll()) {
    animation: count-up $easing both;
    animation-timeline: scroll(root);
  }
}
@keyframes count-up { from { --num: 0; } to { --num: 100; } }

.counter__num.is-demo { animation: count-up-loop $duration $easing infinite; }
@keyframes count-up-loop {
  0%   { --num: 0; }
  92%  { --num: 100; }
  100% { --num: 100; }
}

@media (prefers-reduced-motion: reduce) {
  .counter__num, .counter__num.is-demo { animation: none !important; --num: 100; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.counter {
  position: fixed;
  top: 24px;
  right: 24px;
}

.counter__num {
  --num: 0;
  counter-reset: num var(--num);
  display: block;
  font-weight: 800;
  font-size: clamp(26px, 8vw, 36px);
  line-height: 1;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: #17141a;
}
.counter__num::before {
  content: counter(num) "%";
}
@supports (animation-timeline: scroll()) {
  .counter__num {
    animation: count-up linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes count-up {
  from {
    --num: 0;
  }
  to {
    --num: 100;
  }
}
.counter__num.is-demo {
  animation: count-up-loop 2s linear infinite;
}

@keyframes count-up-loop {
  0% {
    --num: 0;
  }
  92% {
    --num: 100;
  }
  100% {
    --num: 100;
  }
}
@media (prefers-reduced-motion: reduce) {
  .counter__num, .counter__num.is-demo {
    animation: none !important;
    --num: 100;
  }
}

import { useEffect, useState } from "react";
import styles from "./PercentCounter.module.scss";

export type PercentCounterProps = {
  /** 숫자 색 */
  color?: string;
};

// 실제 쓰임: 스크롤 진행률을 그대로 정수 퍼센트로 보여준다.
export default function PercentCounter({ color = "#17141a" }: PercentCounterProps) {
  const [percent, setPercent] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      setPercent(max > 0 ? Math.min(100, Math.round((window.scrollY / max) * 100)) : 0);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className={styles.counter} role="status" aria-label="Reading progress">
      <span className={styles.num} style={{ color }}>{percent}%</span>
    </div>
  );
}

新しいタブで開く

06 · 数値パーセント — 計測累積面積 0.872% · 動いたフレーム 22/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

@property정수 보간% 붙이기

長いアンケートの進捗に

@property --num { syntax: '<integer>'; initial-value: 0; inherits: false; }

.counter__num {
  --num: 0;
  counter-reset: num var(--num);
  &::before { content: counter(num) '%'; }

  @supports (animation-timeline: scroll()) {
    animation: count-up linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes count-up { from { --num: 0; } to { --num: 100; } }

07章ステップ

scale(1.25)を挟んだ理由

上に並んだ4つの章番号のうち、今読んでいる章の丸だけが色で塗りつぶされます。色を瞬時に切り替えるだけでは変化する一瞬が短すぎて測定に引っかからなかったため、scale(1.25)のポップを挟んで変化区間を広げてあります。チュートリアルシリーズや、複数ステップのガイド記事に向いています。

<main class="stage">
  <ol class="steps is-demo" aria-label="章の進捗">
    <li class="step"><span class="step__circle">1</span></li>
    <li class="step"><span class="step__circle">2</span></li>
    <li class="step"><span class="step__circle">3</span></li>
    <li class="step"><span class="step__circle">4</span></li>
  </ol>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;
$color: $subject-cream;                             // 채워진 원 색
$track: rgba(255, 255, 255, .22);                    // 연결선 색

@include stage($stage-orange);

.steps {
  position: relative;
  display: flex;
  gap: $sp-6;
  margin: 0; padding: 0;
  list-style: none;
}

.step {
  position: relative;
  &:not(:first-child)::before {
    content: "";
    position: absolute;
    right: 100%; top: 50%;
    width: $sp-6; height: 2px;
    background: $track;
  }
}

.step__circle {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid $track;
  background: transparent;
  color: $subject-ink;                 // AA: 채워지기 전 원 숫자 — 주황 무대 위 5.50:1
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
}

// ── 실제 사용: 같은 스텝 키프레임을 시간 대신 스크롤 구간(animation-range)에 건다 ──
// .step:nth-child(2) .step__circle { animation: fill-2 linear both; animation-timeline: scroll(root); }

// ── 데모: 챕터 번호가 순서대로 하나씩 부풀며 채워지고, 루프가 돌면 처음으로 되돌아간다 ──
// (색만 순간 전환하면 프레임 사이 변화가 한두 장뿐이라 눈에 덜 띈다 — scale 팝으로 구간을 넓힌다)
.steps.is-demo .step:nth-child(1) .step__circle { animation: fill-1 $duration ease-out infinite; }
.steps.is-demo .step:nth-child(2) .step__circle { animation: fill-2 $duration ease-out infinite; }
.steps.is-demo .step:nth-child(3) .step__circle { animation: fill-3 $duration ease-out infinite; }
.steps.is-demo .step:nth-child(4) .step__circle { animation: fill-4 $duration ease-out infinite; }

@keyframes fill-1 {
  0%          { background: transparent; color: $subject-ink; border-color: $track; transform: scale(1); }
  8%          { background: $color; color: $subject-ink; border-color: $color; transform: scale(1.25); }
  15%, 100%   { background: $color; color: $subject-ink; border-color: $color; transform: scale(1); }
}
@keyframes fill-2 {
  0%, 25%     { background: transparent; color: $subject-ink; border-color: $track; transform: scale(1); }
  33%         { background: $color; color: $subject-ink; border-color: $color; transform: scale(1.25); }
  40%, 100%   { background: $color; color: $subject-ink; border-color: $color; transform: scale(1); }
}
@keyframes fill-3 {
  0%, 50%     { background: transparent; color: $subject-ink; border-color: $track; transform: scale(1); }
  58%         { background: $color; color: $subject-ink; border-color: $color; transform: scale(1.25); }
  65%, 100%   { background: $color; color: $subject-ink; border-color: $color; transform: scale(1); }
}
@keyframes fill-4 {
  0%, 75%     { background: transparent; color: $subject-ink; border-color: $track; transform: scale(1); }
  83%         { background: $color; color: $subject-ink; border-color: $color; transform: scale(1.25); }
  90%, 100%   { background: $color; color: $subject-ink; border-color: $color; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .steps.is-demo .step__circle { animation: none !important; background: $color; border-color: $color; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ff4d1f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.steps {
  position: relative;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
}
.step:not(:first-child)::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 24px;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
}

.step__circle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #17141a;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  font-family: inherit;
}

.steps.is-demo .step:nth-child(1) .step__circle {
  animation: fill-1 2s ease-out infinite;
}

.steps.is-demo .step:nth-child(2) .step__circle {
  animation: fill-2 2s ease-out infinite;
}

.steps.is-demo .step:nth-child(3) .step__circle {
  animation: fill-3 2s ease-out infinite;
}

.steps.is-demo .step:nth-child(4) .step__circle {
  animation: fill-4 2s ease-out infinite;
}

@keyframes fill-1 {
  0% {
    background: transparent;
    color: #17141a;
    border-color: rgba(255, 255, 255, 0.22);
    transform: scale(1);
  }
  8% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1.25);
  }
  15%, 100% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1);
  }
}
@keyframes fill-2 {
  0%, 25% {
    background: transparent;
    color: #17141a;
    border-color: rgba(255, 255, 255, 0.22);
    transform: scale(1);
  }
  33% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1.25);
  }
  40%, 100% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1);
  }
}
@keyframes fill-3 {
  0%, 50% {
    background: transparent;
    color: #17141a;
    border-color: rgba(255, 255, 255, 0.22);
    transform: scale(1);
  }
  58% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1.25);
  }
  65%, 100% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1);
  }
}
@keyframes fill-4 {
  0%, 75% {
    background: transparent;
    color: #17141a;
    border-color: rgba(255, 255, 255, 0.22);
    transform: scale(1);
  }
  83% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1.25);
  }
  90%, 100% {
    background: #fff7e6;
    color: #17141a;
    border-color: #fff7e6;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .steps.is-demo .step__circle {
    animation: none !important;
    background: #fff7e6;
    border-color: #fff7e6;
  }
}

import { useEffect, useState } from "react";
import styles from "./ChapterSteps.module.scss";

export type ChapterStepsProps = {
  /** 챕터 수 */
  total: number;
  /** 채워진 원 색 */
  color?: string;
};

// 실제 쓰임: 전체 스크롤 진행률을 챕터 수로 나눠 지금 챕터를 계산한다.
export default function ChapterSteps({ total, color = "#fff7e6" }: ChapterStepsProps) {
  const [current, setCurrent] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      const p = max > 0 ? Math.min(1, window.scrollY / max) : 0;
      setCurrent(Math.min(total - 1, Math.floor(p * total)));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [total]);

  return (
    <ol className={styles.steps} aria-label="Chapter progress">
      {Array.from({ length: total }, (_, i) => (
        <li key={i} className={styles.step}>
          <span className={styles.circle} style={i <= current ? { background: color, borderColor: color } : undefined}>
            {i + 1}
          </span>
        </li>
      ))}
    </ol>
  );
}

新しいタブで開く

07 · 章ステップ — 計測累積面積 3.558% · 動いたフレーム 16/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

원 채움챕터 4개scale 1.25배

複数ステップのガイドに

@keyframes fill-2 {
  0%, 25%    { background: transparent; transform: scale(1); }
  33%        { background: $color; transform: scale(1.25); }
  40%, 100%  { background: $color; transform: scale(1); }
}
.step:nth-child(2) .step__circle { animation: fill-2 linear both; }

08目次ハイライト

ピルがスライドして追従する

サイドの目次で、今読んでいる見出しにだけ背景のピルがスライドして追従します。濃い単色のピルは2行にまたがる遷移の途中で文字とのコントラストが崩れたため、14%の薄いティントと左のボーダーに変えてあります。ドキュメントサイトの目次や、長いガイド記事のスクロールスパイに向いています。

<main class="stage">
  <nav class="toc is-demo" aria-label="目次">
    <span class="toc__pill" aria-hidden="true"></span>
    <a class="toc__item" href="#" tabindex="-1">はじめに</a>
    <a class="toc__item" href="#" tabindex="-1">インストール</a>
    <a class="toc__item" href="#" tabindex="-1">使い方</a>
    <a class="toc__item" href="#" tabindex="-1">まとめ</a>
  </nav>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$duration: $dur-loop;
$color: $subject-blue;                              // 활성 알약 색
$row: 36px;                                         // 목차 한 줄 높이 (알약 이동 간격)

@include stage($stage-paper);

.toc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(220px, 80vw);
}

// 옅은 색 칩이라야 알약이 두 줄에 걸치는 전환 중에도 글자 대비가 안 깨진다 (진한 배경 + 어두운 글자는 전환 중 대비가 무너진다)
.toc__pill {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: $row;
  border-radius: $r-sm;
  background: rgba(47, 109, 246, .14);
  border-left: 3px solid $color;
  z-index: 0;
  transform: translateY(0);
}

.toc__item {
  position: relative;
  z-index: 1;
  height: $row;
  display: flex;
  align-items: center;
  padding: 0 $sp-3;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  color: $subject-ink;
  text-decoration: none;
}

// ── 실제 사용: 흔히 IntersectionObserver 로 지금 보이는 제목을 찾아 --active 를 바꾼다.
// 구간 크기가 고르면 animation-timeline: scroll(root) 로도 같은 스텝 키프레임을 쓸 수 있다 ──

// ── 데모: 알약이 항목 네 개를 순서대로 미끄러지듯 오르내린다 ──
// (구간마다 바로 다음 값으로 점프하면 프레임 사이 변화가 한두 장뿐이다 — 구간의 절반을 이동에 쓴다)
.toc.is-demo .toc__pill { animation: move $duration ease-in-out infinite; }
@keyframes move {
  0%, 10%    { transform: translateY(0); }
  25%, 35%   { transform: translateY($row); }
  50%, 60%   { transform: translateY($row * 2); }
  75%, 85%   { transform: translateY($row * 3); }
  100%       { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .toc.is-demo .toc__pill { animation: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.toc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(220px, 80vw);
}

.toc__pill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 36px;
  border-radius: 8px;
  background: rgba(47, 109, 246, 0.14);
  border-left: 3px solid #2f6df6;
  z-index: 0;
  transform: translateY(0);
}

.toc__item {
  position: relative;
  z-index: 1;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  color: #17141a;
  text-decoration: none;
}

.toc.is-demo .toc__pill {
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  0%, 10% {
    transform: translateY(0);
  }
  25%, 35% {
    transform: translateY(36px);
  }
  50%, 60% {
    transform: translateY(72px);
  }
  75%, 85% {
    transform: translateY(108px);
  }
  100% {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .toc.is-demo .toc__pill {
    animation: none !important;
  }
}

import { useEffect, useState } from "react";
import styles from "./TocHighlight.module.scss";

export type TocItem = { id: string; label: string };
export type TocHighlightProps = {
  items: TocItem[];
  /** 알약 색 */
  color?: string;
  /** 한 줄 높이 (px) */
  row?: number;
};

// 실제 쓰임: IntersectionObserver 로 지금 보이는 제목을 찾아 알약을 그 줄로 옮긴다.
export default function TocHighlight({ items, color = "#2f6df6", row = 36 }: TocHighlightProps) {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const els = items.map((it) => document.getElementById(it.id)).filter(Boolean) as HTMLElement[];
    const io = new IntersectionObserver(
      (entries) => {
        const top = entries.filter((e) => e.isIntersecting).sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
        if (top) setActive(els.indexOf(top.target as HTMLElement));
      },
      { threshold: [0.3, 0.6] }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, [items]);

  return (
    <nav className={styles.toc} aria-label="Contents" style={{ width: 220 }}>
      <span className={styles.pill} style={{ borderLeftColor: color, height: row, transform: `translateY(${active * row}px)` }} />
      {items.map((it) => (
        <a key={it.id} href={`#${it.id}`} className={styles.item} style={{ height: row }}>
          {it.label}
        </a>
      ))}
    </nav>
  );
}

新しいタブで開く

08 · 目次ハイライト — 計測累積面積 21.896% · 動いたフレーム 15/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

translateY 알약현재 항목만좌측 보더 3px

ドキュメントサイトの目次に

.toc__pill {
  position: absolute;
  background: rgba(47, 109, 246, .14);
  border-left: 3px solid $color;
  animation: move $dur-loop ease-in-out infinite;
}
@keyframes move {
  0%, 10%  { transform: translateY(0); }
  25%, 35% { transform: translateY($row); }
  100%     { transform: translateY(0); }
}

09残り読了時間

残り分数を差し引いて数える

「残りN分」の数字が、スクロールするほど減っていきます。残り分数は全体の分数から読んだ割合を差し引いた値で、@property --minを整数として登録して滑らかに数えています。長い記事のヘッダーや、ニュースレターのWeb版に向いています。

<main class="stage">
  <p class="time is-demo" role="status">
    <span class="time__label">残り</span>
    <span class="time__num" aria-hidden="true"></span>
    <span class="time__label">分</span>
  </p>
</main>

@use "../../../../site/static/demo-tokens" as *;

// ── 변수 3개 ──────────────────────────────────────────
$total: 12;                                         // 전체 예상 분 (두 자릿수로 시작해야 자릿수가 바뀌는 순간도 보인다)
$color: $subject-cream;                             // 숫자 색
$duration: $dur-loop;

@include stage($stage-ink);

@property --min {
  syntax: '<integer>';
  initial-value: #{$total};
  inherits: false;
}

.time {
  display: flex;
  align-items: baseline;
  gap: $sp-2;
  margin: 0;
  color: rgba(255, 255, 255, .7);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
}

.time__num {
  --min: #{$total};
  counter-reset: min var(--min);
  color: $color;
  font-weight: 800;
  font-size: clamp(34px, 11vw, 46px);
  line-height: 1;
  font-family: inherit;
  font-variant-numeric: tabular-nums;

  &::before { content: counter(min); }

  // 실제 사용: 남은 분수 = 전체 분수 × (1 − 스크롤 진행률)
  @supports (animation-timeline: scroll()) {
    animation: count-down linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes count-down { from { --min: #{$total}; } to { --min: 0; } }

.time.is-demo .time__num { animation: count-down-loop $duration linear infinite; }
@keyframes count-down-loop {
  0%   { --min: #{$total}; }
  92%  { --min: 0; }
  100% { --min: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .time__num, .time.is-demo .time__num { animation: none !important; --min: 0; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

@property --min {
  syntax: "<integer>";
  initial-value: 12;
  inherits: false;
}
.time {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  font-family: inherit;
}

.time__num {
  --min: 12;
  counter-reset: min var(--min);
  color: #fff7e6;
  font-weight: 800;
  font-size: clamp(34px, 11vw, 46px);
  line-height: 1;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.time__num::before {
  content: counter(min);
}
@supports (animation-timeline: scroll()) {
  .time__num {
    animation: count-down linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes count-down {
  from {
    --min: 12;
  }
  to {
    --min: 0;
  }
}
.time.is-demo .time__num {
  animation: count-down-loop 2s linear infinite;
}

@keyframes count-down-loop {
  0% {
    --min: 12;
  }
  92% {
    --min: 0;
  }
  100% {
    --min: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .time__num, .time.is-demo .time__num {
    animation: none !important;
    --min: 0;
  }
}

import { useEffect, useState } from "react";
import styles from "./ReadingTime.module.scss";

export type ReadingTimeProps = {
  /** 전체 예상 분 */
  totalMinutes: number;
  /** 숫자 색 */
  color?: string;
};

// 실제 쓰임: 남은 분 = 전체 분 × (1 − 스크롤 진행률).
export default function ReadingTime({ totalMinutes, color = "#fff7e6" }: ReadingTimeProps) {
  const [left, setLeft] = useState(totalMinutes);

  useEffect(() => {
    const onScroll = () => {
      const max = document.documentElement.scrollHeight - window.innerHeight;
      const p = max > 0 ? Math.min(1, window.scrollY / max) : 0;
      setLeft(Math.max(0, Math.round(totalMinutes * (1 - p))));
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, [totalMinutes]);

  return (
    <p className={styles.time} role="status">
      <span>left</span>
      <span className={styles.num} style={{ color }}>{left}</span>
      <span>min</span>
    </p>
  );
}

新しいタブで開く

09 · 残り読了時間 — 計測累積面積 1.545% · 動いたフレーム 12/23GODRICH オリジナル · SCSS と React は zip に同梱 · パスワードを見る

카운트다운분 단위scroll() 연동

ニュースレターのWeb版に

@property --min { syntax: '<integer>'; initial-value: 12; inherits: false; }

.time__num {
  --min: 12;
  counter-reset: min var(--min);
  &::before { content: counter(min); }
}
@keyframes count-down { from { --min: 12; } to { --min: 0; } }

どこで崩れるか — 落とし穴

対応の足並みが揃っていない

01・02・04・05・06・09の6つはanimation-timeline: scroll()ひとつだけでJavaScriptなしに動きますが、この機能への対応はまだ足並みが揃っていません。実測(2026-09-10)は下の表の通りです。

機能	Chrome・Edge	Safari	Firefox
`animation-timeline` scroll()	115以降	26以降(2025年9月)	158以降、2026年9月時点の安定版はフラグの内側
`@property`	85以降	16.4以降	128以降

steps(1)だけでは動きと見なされない

読み終わりを祝いに変える紙吹雪アニメーションも同じ落とし穴を抱えており、進捗が100%へ届く瞬間を取り違えると何もない画面で弾けてしまいます。

対応バージョンの一覧はMDNのanimation-timeline対応表とMDNの@property対応表で確認できます。実際にコードを動かして計測しているときに踏んだ落とし穴もひとつあります。07の章ステップを色の瞬間切り替え(steps(1))だけで作ると、フレームごとに変化がある区間がわずか4枚しかなく、測定スクリプトに「ほとんど動いていない」と判定されました。切り替わる瞬間にscale(1.25)のポップを挟んで変化区間を広げたところ、16枚まで増えてようやく動きとして認識されました。scroll()にまだ対応していないブラウザでは、scroll()に頼る6つの進行表示が止まったままになるため、zipのreact/版は9つ全部についてwindowのscrollイベントやJSでの区間判定(03・08のようなIntersectionObserverなど)で同じ値を計算し直す代替コードを最初から積んであります。この値を反映済みの9ファイルを開く圧縮パスワードは3rmg234aで、下からzipひとつにまとめて受け取れます。

アクセシビリティ

止めたあとどの状態で残すか

9つともprefers-reduced-motion: reduceではアニメーションを止めます。01・02・04・05・06・07・09のように進捗を累積で満たしていくものは、進捗0の初期状態ではなく読み終えた最終状態で固定されます。一方、03の点ナビと08の目次のように今見ている区間だけを点灯させるものは、最初の項目が点灯した状態で固定されます。06の数値と09の残り時間のようにcounter()で描いた数字はスクリーンリーダーがそもそも読み上げられないため、数字自体はaria-hiddenで隠し、包む要素にrole="status"またはrole="progressbar"とaria-valuenowを別に付けています。08の目次で今読んでいる見出しを指す項目は実際の<a href="#見出しid">なので、キーボードだけでもそのままたどり着けます。03の点ナビの点は装飾のためaria-hiddenで隠されており、スクリーンリーダーやキーボード移動の対象にはなりません。

@media (prefers-reduced-motion: reduce) {
  .bar, .rail__fill, .badge,
  .headline, .counter__num, .time__num { animation: none !important; }
  .bar, .rail__fill { transform: scaleX(1); }
}

次に読む

prefers-reduced-motion自体の対応状況はMDNの該当ページで確認できます。ほかのCSSアニメーションを探すならカテゴリー一覧、このサイトが何を配っているかは紹介ページで説明しています。

FAQ

scroll()にまだ対応していないブラウザではどうなりますか？

animation-timeline: scroll()を使う6つ(01・02・04・05・06・09)は@supports (animation-timeline: scroll())で囲んであるため、対応がなければ中のアニメーションはただ適用されません。残り3つ(03・07・08)はもともとJSでスクロール位置を判定する方式です。zipのreact/版は9つ全部についてJSで同じ値を計算し直しているので、CSSの代わりにこちらのコンポーネントを使えばFirefoxを含むすべてのブラウザで進捗が動きます。

「css プログレスバーデザイン」を9つのうちいくつ同時に置いても大丈夫ですか？

01の上部バーと04の縦バーのように置き場所が重ならない組み合わせなら問題ありません。ただし06の数値と09の残り時間のように、同じ進捗を別の数字で見せるものは、どちらか一方だけにしてください。両方点けると、どちらの数字を見ればいいのか分かりにくくなります。

見出しが少ない記事でも08の目次ハイライトは使えますか？

H2が4つに満たないと、ピルの移動がほとんど起きず効果そのものが見えません。当サイトではH2が4つ以上ある記事にだけ08を付け、それより短い記事には01の上部バーだけを残す運用にしています。バーではなく点や目次で現在地を示す派生はスクロールインジケーター9選に別途まとめました。

【コピペOK】プログレスバー css アニメーション 9選

01上部の細いバー

scroll(root)ひとつで動く

長い記事のヘッダー直下に

02円形リングバッジ

「css プログレスバー 円」をconic-gradientで

トップへ戻るボタンと兼ねる

03セクションドットナビ

IntersectionObserverで判定する

ワンページ構成のナビに

04サイド縦バー

同じ仕組みを縦方向に

ドキュメントサイトの右余白に

05文字塗りつぶし

background-clipで切り抜く

ヒーローの見出しに

06数値パーセント

整数として登録する理由

長いアンケートの進捗に

07章ステップ

scale(1.25)を挟んだ理由

複数ステップのガイドに

08目次ハイライト

ピルがスライドして追従する

ドキュメントサイトの目次に

09残り読了時間

残り分数を差し引いて数える

ニュースレターのWeb版に

どこで崩れるか — 落とし穴

対応の足並みが揃っていない

steps(1)だけでは動きと見なされない

アクセシビリティ

止めたあとどの状態で残すか

次に読む

FAQ

scroll()にまだ対応していないブラウザではどうなりますか？

「css プログレスバー デザイン」を9つのうちいくつ同時に置いても大丈夫ですか？

見出しが少ない記事でも08の目次ハイライトは使えますか？

こんな記事もどうぞ

「css プログレスバー円」をconic-gradientで

「css プログレスバーデザイン」を9つのうちいくつ同時に置いても大丈夫ですか？