page scroll progress bar

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page Scroll Progress Bar Demo Page | par NGLESSON</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="keyword" content="Page Scroll Progress Bar Demo Page">
  <meta name="author" content="Mezgani said">
  <meta name="copyright" content="NGLESSON">
  <link href="" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <link href="style.css"  rel="stylesheet" type="text/css">
</head>
<body>
  
  <div id="progress"></div>
  <h1>Page Scroll Progress Bar Demo Page</h1>
  <h2>Keep Scrolling</h2>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
  <script>
  $('#progress').progress(
    {
      size:'3px',
      wapperBg: '#eee',
      innerBg: '#DA4453' // inner color
  });
</script>
</body>
</html>

@charset "utf-8";

body { min-height: 300vh;background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%); }
h1,h2 { text-align: center; }
h1 { margin-top: 150px; }



if (typeof jQuery === 'undefined') {
  throw new Error('EROR')
}

(function($){
  function Progress(el, options) {
    this.el = el
    this.options = options
    this._init()
  }
  
  Progress.prototype._init = function() {
    var docHeight = $('body').height() // 文档高度
    var sercHeight = $(window).height() // 屏幕高度
    var resHeight = docHeight - sercHeight

    var config = this.options

    var proConfig = {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '2px',
      backgroundColor: '#eee',
      zIndex: 9999
    }
    var innerConfig = {
      width: 0,
      backgroundColor: '#50bcb6',
      height: '100%',
      transitionProperty: 'width',
      transitionDuration: '.3s',
      transitionTimingFunction: 'linear'
    }

    var proMap = ['size', 'position', 'wapperBg', ]
    var innerMap = ['innerBg', 'duration', 'effect']
    var setMap = proMap.concat(innerMap)

    for(let key in config) {
      if(!setMap.includes(key)) delete config[key]
      switch (key) {
        case 'size':
          proConfig.height = config.size
          break;
        case 'position':
          if(config.position === 'bottom') {
            delete proConfig.top
            proConfig['bottom'] = 0
          }
          break;
        case 'wapperBg':
          proConfig.backgroundColor = config.wapperBg
          break;
        case 'innerBg':
          innerConfig.backgroundColor = config.innerBg
          break;
        case 'duration':
          innerConfig.transitionDuration = config.duration
          break;
        case 'effect':
          innerConfig.transitionTimingFunction = config.effect
          break;
        default:
          break;
      }
    }

    this.el.empty().css(proConfig)
    $('<div class="inner"></div>').appendTo(this.el).css(innerConfig)
    
    $(window).scroll(function(e) {
      window.requestAnimationFrame(function(){
        var width = Math.max(0, Math.min(1, $(window).scrollTop() / resHeight))
        $('.inner').show().css('width', width * 100 +'%')
      })
    })
  }

  $.fn.progress = function(options) {
    this.each(function(el) {
      new Progress($(this), options || null)
    })
    return this
  }
  
})(jQuery)