Webページ最上部に、スクロールに応じてプログレスバーを表示する

Result

スクロールするとプログレスバーが表示されるやつ。非依存です
仕様が分かりやすいようにド派手なグラデーションにしています

スクロールに応じて徐々に伸ばしているのが分かります

JavaScript

/*
MIT License by flouthoc/scrollpup.js
github.com/flouthoc/scrollpup.js
Copyright (c)flouthoc
*/

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.scrollpup = factory());
}(this, (function () { 'use strict';

  var ScrollPup = function ScrollPup (opts) {
    var this$1 = this;

    var defaults = {
      background: 'linear-gradient(to right, #36d1dc, #5b86e5)',
      height: '10px'
    };

    Object.assign(this, defaults);
    Object.assign(this, opts);

    this.init = false;

    window.addEventListener('scroll', function (e) { return this$1.run(this$1); });
  };

  ScrollPup.prototype.run = function run (opts) {
    if (!this.init) {
      var scrollbar$1 = document.createElement('div');
      scrollbar$1.classList = 'scroll-pup';
      document.body.appendChild(scrollbar$1);

      this.init = true;
    }

    var scrollbar = document.querySelector('.scroll-pup');
    var fullPage = document.documentElement;
    var fullBody = document.body;
/*ページの高さと現在の位置を割り出して、パーセンテージを算出*/
    var percent = Math.floor((fullPage['scrollTop'] || fullBody['scrollTop']) / ((fullPage['scrollHeight'] || fullBody['scrollHeight']) - fullPage.clientHeight) * 100);

    scrollbar.style.height = opts.height;
    scrollbar.style.background = opts.background;
    scrollbar.style.width = percent + '%';/*算出したパーセンテージをプログレスバーのwidthに割り当てる*/
    scrollbar.style.position = 'fixed';/*位置固定*/
    scrollbar.style.top = 0;
    scrollbar.style.right = 0;
    scrollbar.style.left = 0;
  };

  var scrollpup = function (opts) { return new ScrollPup(opts); };

  return scrollpup;

})));

/*高さと色はオプションで設定*/
scrollpup({
      background: 'linear-gradient(to right,red,orange,yellow,green,aqua, blue,purple)'
    })

html

<div class="spacer">
　foo bar
   ・　　
   ・　
   ・　
   ・　　　
</div>

via

flouthoc/scrollpup.js