JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <div class="article-title">
    <h1>六号記</h1>
    <div class="progress-wrapper">
      <div class="progress-label"></div>
      <progress></progress>
    </div>
  </div><img src="https://picsum.photos/500/300"/>
  <p>どうにもならぬことを、ひとりぶつぶつ云つてもしようがない、と思ふやうになつてゐることは事実である。誰でも考へてゐるやうなことを、わざわざ口に出して云ふのは、野暮の骨頂だ、といふ風にも教へられてゐる。が、しかし、どうにもならないとは、一体、いつからきまつてしまつたのであらう？　当り前でないことが当り前で通るやうになつたのは、誰もが考へてゐるだけで、公然とそれを云はないからではないかと、私は近頃しきりにそそのかされるやうな気持になつて来た。</p>
  <p>では、どういふ風にそれを云つたらいいか、誰に向つてそれを云ふべきか、先づ何から云ひ出したものであらうか？
　ひとつひとつを取り上げると、さも「小さなこと」に似てゐる。そんな小さなことではないと思ふのだが、それを「大きなこと」に結びつけると、話が空漠として誰の胸にも響かなくなりさうだ。わかるものにはわかるに違ひないが、わからせたい人間がびくともしないにきまつてゐる。</p>
  <p>私は、いま、自分の仕事のことを楽しく考へる習慣を失はうとしてゐる。仕事をしてゐさへすればよいのだ、といふ自信がもてないのだ。勿論、かういふ時代に、わき目もふらず自分だけの仕事に没頭し得る人達を尊敬し、羨むことは、さういふ人達の仕事が立派である場合に殊に文句はないのであるが、私は、不幸にして、演劇といふ専門を撰んだためか、自分だけの仕事ではすまされない境遇におかれてゐる。自然、われわれの成長を阻む一切のものを、単なる現象として、冷やかにこれを視過すことができないのであらう。
　この不安焦慮は、煎じつめると、日本といふ国はこれでいいのだらうかといふことである。嗤はずに聴いてほしい。芝居なんかどうなつてもかまはない。日本が住むに堪えないといふことは、眼かくしをされた人間どもにはわからない。
　世界は今不安の時代だ、といふやうなことを誰でも云ふ。しかし、その不安は、自分の国に愛想をつかさせるやうなものであらうか？　祖国を逃れて安住の地を求めるなどは、恐らく何人にとつても夢であらう。放浪を思ひ立つ以外、眼を瞑るのが当世の気運である。</p>
  <p>われわれは所謂、現代社会の機構について様々な論議を聴いた。最近の政治的動向といふ題目にも注意した。恐らく、何人も今は、新しい時代の精神が何に向つてゐるかを知らぬものはないであらう。
　が、私は、世界共通の問題について語るためには、それだけの知識を欠き、また、それだけの資格が与へられてゐないといふ気がする。私はただ、欧米の二三の国々と、わが日本とを比較するだけの材料をもつてゐるだけである。
　文学といふものが、人間の最も貴重な仕事の一つであるとすれば、その文学を見事に育て上げた民族とその文化の特質が、なんであつたかを考へてみないわけには行かないだけである。
　第一に云つておくが、われわれは、日本人を素質的に優れた民族だと信じてゐる。偉大な文学を生むべき特殊な性能を具へてゐるのである。ところが、われわれの祖先は、何を誤つたか、凡そ文学の泉を涸渇させるやうな文化を作り上げてしまつたのである。落葉の下を細々と流れる過去数百年の文学的伝統を見るがよい、清冽な水の一筋を、われわれは誇り気に汲むことはできるが、無数の旺盛な喉の渇きを癒やすに足りない。それが、今日西洋文学氾濫の原因である。 </p><img src="https://picsum.photos/500/301"/>
  <p>日本の近代化は、たまたまその機運を促したが、ここにも、まだ伝統的な障碍があつた。「出世」をするために文学は無用であつた。文学は天邪鬼のみを吸ひ寄せた。善良な国民は、文学と縁を切らされたのである。義務教育は文学的教養を無視しつつ、文学中毒者を出すに止つた。西洋文学は氾濫はしたが、浸潤はしなかつた。文学を志すものは、同志以外に、倶に語る相手はなく、「自分」を語る以外の興味を失つてしまつたのである。</p>
 ...

CSS

:root {
  --progress-bar-height: 4px;
  --progress-bar-color: #ddd;
  --progress-bar-value-color: red;
  --progress-bar-value: 20%;
}

article {
  position: relative;
  padding: 24px;
  width: 100%;
  max-width: 500px;
  margin: 60px auto;
}

.article-title {
  position: sticky;
  top: 0;
  padding-bottom: 24px;
}

h1 {
  margin-bottom: 0;
  padding: 18px 40px 18px 0;
  font-size: 1.8rem;
  background-color: white;
}

img {
  width: 100%;
  margin-bottom: 18px;
}

.progress-wrapper {
  position: relative;
}

.progress-label {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 14px;
}

progress {
  appearance: none;
  position: absolute;
  width: 100%;
  height: var(--progress-bar-height);
  background-color: var(--progress-bar-color);
  border: none;
}
progress::-moz-progress-bar {
  background-color: var(--progress-bar-value-color);
}
progress::-webkit-progress-bar {
  background-color: var(--progress-bar-color);
}
progress::-webkit-progress-value {
  background-color: var(--progress-bar-value-color);
}
progress::-ms-fill {
  background-color: var(--progress-bar-value-color);
}

JavaScript

$(document).ready(function() {
  const win = $(window);
  const doc = $(document);
  const progressBar = $('progress');
  const progressLabel = $('.progress-label');
  const setValue = () => win.scrollTop();
  const setMax = () => doc.height() - win.height();
  const setPercent = () => Math.round(win.scrollTop() / (doc.height() - win.height()) * 100);
  
  progressLabel.text(setPercent() + '%');
  progressBar.attr({ value: setValue(), max: setMax() });

  doc.on('scroll', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ value: setValue() });
  });
  
  win.on('resize', () => {
    progressLabel.text(setPercent() + '%');
    progressBar.attr({ value: setValue(), max: setMax() });
  })
});