Pure CSS Scroll Depth Indicator

A pure CSS solution to create a fixed header progress bar indicating how far you have scrolled. Powered by @supports CSS at-rule.

Preview:

Create the fixed header.

<header>
  <h1>Scroll Indicator</h1>
</header>

header {
  position: fixed;
  top: 0;
  height: 125px;
  width: 100%;
  background: white;
}
header {
  padding: 10px 10%;
  box-sizing: border-box;
}

Add main content to the main element as follow:

<main>
  ...
</main>

main {
  margin-top: 128px;
}
main {
  padding: 10px 10%;
  box-sizing: border-box;
}

The main CSS to calc the scroll position and update the scroll bar on page scroll.

@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;
  }
}