Индикатор прокрутки страницы | CSS

Автор: фиксированный заголовок, под заголовком индикатор, показывающий долго ли ещё до конца страницы.

<style>
html,
body {
  margin: 0;
}
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 97px; /* высота шапки сайта */
  background: white;
}
main {
  margin-top: 100px; /* чтобы была видна верхняя часть содержимого main, чтобы header не заезжал на контент, так как он выносится из потока */
}
@supports (height: 100vh) { 
  body{ 
    background: linear-gradient(to right top, #0089f2 50%, #ddd 50%) 0 100px / 100% calc(100% - 100vh) no-repeat #ddd; /* 100px - 97px = 3px (высота индикатора) */
  }
  body:before {
    content:'';
    position: fixed;
    top: 100px;
    bottom: 0;
    width: 100%;
    z-index: -1;  /* слой над фоном, но под текстом */
    background: white;
  }
}
</style>
<header>
  <h1>Scroll-индикатор</h1>
</header>
<main>
  содержимое страницы
</main>

Идея: body задаётся градиент, который делит его надвое по диагонали. Видна только часть рисунка. Остальное сверху скрывает под слоем белого фона заголовок, а снизу — :before. Я только чуть-чуть подправила код.

<style>
#raz {
  max-width: 10em;
  height: 10em;
  background: linear-gradient(to right top, #0089f2 50%, #ddd 50%); 
}
</style>
<div id="raz"></div>