https://corporatecounselnow.com/modules/custom/reading_progress_bar/js/reading_progress_bar.js?v=1.x

1/**
2 * @file
3 * JS handler for reading progres bar.
4 */
5(function ($, Drupal, drupalSettings) {
6  Drupal.behaviors.reading_progress_bar = {
7    attach: function attach(context) {
8      var $context = $(context);
9      var winHeight = $(window).height();
10      var docHeight = $(document).height();
11      var progressBar = $('progress');
12      var max;
13      var value;
14      var ds = drupalSettings.readingprogress;
15      var b = ds.background_color;
16      var c = ds.color;
17      var css = 'progress::-webkit-progress-bar{background-color:' + c + '}progress::-webkit-progress-value{background-color:' + b + '!important}progress::-moz-progress-bar{background-color:' + c + '!important}progress{background-color:' + c + '}progress{color:' + b + '}';
18      var head = document.head;
19      var style = document.createElement('style');
20      head.append(style);
21      style.type = 'text/css';
22      style.appendChild(document.createTextNode(css));
23      progressBar.insertAfter('#top');
24
25      /* Set the max scrollable area */
26      max = docHeight - winHeight;
27      progressBar.attr('max', max);
28      $(document).on('scroll', function () {
29        value = $(window).scrollTop();
30        progressBar.attr('value', value);
31      });
32      /* Set custom styles */
33
34      progressBar.attr('style','height: ' + ds.height + ';');
35      $('body').attr('style', 'padding-top: ' + drupalSettings.readingprogress.height + ';');
36
37    }
38  };
39})(jQuery, Drupal, drupalSettings);