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)
Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Calculatrice style01

Calculatrice style01

Card Bootstrap4 E commerce 01

Card Bootstrap4 E commerce 01

ChartJS style01

ChartJS style01

Form contact avec validation en css

Form contact avec validation en css

Geocoded Locations

Geocoded Locations

Image hover 06

Image hover 06

Loading style book loader

Loading style book loader

Pagination with Jquery

Pagination with Jquery

Planète animée style01

Planète animée style01

Timeline style08

Timeline style08

up down tr in table with js

up down tr in table with js