Edit in JSFiddle

Result
JavaScript
CSS
HTML

$(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() });
  })
});

: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);
}

<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>
  <p>西洋崇拝の思想は、いろいろなところから来てをり、いろいろな種類に分けられるが、西洋の物質文化に憧れるものなどは、今日殆どありはせぬのである。政治家も教育家も、恐らくそのことに気がついてゐる筈である。ただ、わざと知らん顔をしてゐるだけである。西洋排斥の音頭取りは、西洋崇拝の軽薄な一面をしか見てゐないのではない。もつと深刻な一面があることを惧れてゐるのである。</p>
  <p>キリスト教や共産主義は、なるほど西洋の思想なら、それでもよろしい。ただ、深く人間を見、高い精神と、豊かな感情とを描き出す力は、何によつて養はれたか？　外国の侵略を蒙らないといふやうな歴史だけではないのである。
　西洋のどこの国も、西洋のどんな人間も、われわれは崇拝などはしてはゐない。ほんたうに愛してさへもゐないやうに思ふ。愛するといふことが、そのために命をさへ捧げるといふことであるとしたら。
　われわれは、日本人と生れたからには、やはり、日本人のままでありたい。嘗ても云つた如く、それを恥だとも名誉だとも思はないが、ただ、それこそ運命であり、運命を運命として受け容れる気持である。私は、自分のためにも、また、自分の子孫や、自分の愛するもののために、日本が好い国になることを心から祈るものである。</p><img src="https://picsum.photos/500/302"/>
  <p>われわれは、何故に、既に日本が比類のない好い国である、と信じなければならないのか。好いところもあるであらうが、このままではいけないところが随分多いことを、自分の後継者たちに教へておきたく思ふ。祖国を愛するといふ精神は、どういふところから生れて来るのか、それは為政者などが考へてゐるやうに、自分の国が一番優れてゐるといふ観念からではないにきまつてゐる。正しく物を視るのがいけないと教へ込む法はないではないか？　それが危険だと思ふなら、正しく視られて差支ないやうな国にすべきではないか？　私はやつぱり、どうにもならないことを云つてゐるのであらうか？
　国を憂ふるといふ言葉ほど、気恥しい言葉はないと思つてゐた私は、いま、さういふ言葉を使はなければならない破目に陥つた。文学をやつたお蔭かどうか、凡そ、しかし、文学の無力を痛感させる言葉でないか。なぜなら、私の尊敬するわが国の現代作家は、公にまださういふ言葉を使つてゐないやうである。
　思ふに、そんなことを仮にも云はせない何かが、ほんたうの文学者の胸の中には燃えてゐるのであらう。残念ながら、私は、夜、床にはいつて、自分の仕事のことを考へながら、いつの間にか、ああ日本はこんなことでいいのだらうかと、つひ考へてしまふ。すると眼が冴えて寝つかれない。新聞の記事のひとつひとつが頭に浮んで、歯ぎしりをする。滑稽だと思ふが、どうにもしようがないのである。</p>
  <p>それでもまだ、文学の領域では、個人々々の力がある程度まで伸び上つてゐるが、芝居や映画の畑になると、さうは行かない。
　真面目な仕事がまつたく酬いられず、才能が自然な発達を阻まれ、いつまでたつても、近代芸術の名に値するやうな作品が現はれない。原因はどこにあるかと、みんなが、一生懸命に研究してゐる。なるほど、人物もゐない。金もない。が、真の原因は、それ以前に属してゐるのである。さういふものが生れる社会状態でないといふことだ。さういふものを創り出す「生活」を、国民全体がしてゐないといふことだ。要求がないところに何が出よう？
　要求がないといふのは、国民がさういふ風に育てられてゐるからだ。
　民衆に罪はない。指導者に罪があるのである。
　現代の日本は、果して文明国であらうか？</p>
  <p>民衆の生活には、目下、いろいろのことが欠けてゐるであらう。政治家は、先づ何を与ふべきかについて論議するであらう。政治家以外の、文化の指導的地位にあるものは、それぞれの立場から、或は、軍事思想を、或は科学知識を、或は宗教的信念を、或は処世術をと、様々な意見を提出する。何よりも先づ食を与へよといふ叫びに、眼をみはるのは当然である。
　芸術家は、何も云ふ権利はないのであらうか？
　徒らに卑俗な思想を煽る読物や興行物が、公然と芸術の名を犯して、屡々「国家的」に僭越な座席を与へられる不合理を黙視すべきであらうか？　物には程度があり、親爺の道楽も、遂に許してはおけぬといふ場合があるのである。
　かういふ問題が、ある程度まで常識の上に立たなければ、政治的イデオロギイなどは論じてみても仕方がないのではないか？　いや、それよりも、民衆は、一旦、人間として眼覚めると同時に、国家が望むと否とに拘はらず、現在の政治を根本から疑ふ方向に向ふであらう。それを期待するものがあるかないかは、私が云はなくてもわかつてゐる。</p>
 
 <p><a href="https://www.aozora.gr.jp/cards/001154/files/44430_17926.html">青空文庫</a></p>
</article>