Result

スクロールするとプログレスバーが進んで、
あとどれくらいページの高さがあるか分かるようにするやつ

css

header {
  position: fixed;
  top: 0;
  height: 125px;
  width: 100%;
  background: white;
}

main {
  margin-top: 128px;
}

@supports (height: 100vh) {
  body {
    background: linear-gradient(to right top, #0089f2 50%, #ddd 50%);
    background-size: 100% calc(100% - 100vh + 129px);
    background-repeat: no-repeat;
  }

  body:before {
    content: "";
    position: fixed;
    top: 128px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: white;
  }
}

main,
header {
  padding: 10px 10%;
  box-sizing: border-box;
}

背景をスクロールに応じたグラデーションにし、疑似要素で背景を隠す
疑似要素はヘッダーに設定した背景色と統一する
少しすき間を開ければプログレスバーみたいに見せられる、というトリック

html

<header>
	<h1>野球時代</h1>
	
</header>
<main>
	明治二十年代の事である。今この思い出を書こうとしている老学生のまだ紅顔の少年
　　　　　　　・
　　　　　　　・
　　　　　　　・
　　　　　　　・
</main>

via

CSS only scroll indicator