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)
toggle switch style02

toggle switch style02

Transitions Animations SVG Style01

Transitions Animations SVG Style01

Timeline style06

Timeline style06

Image hover 07

Image hover 07

Form Step With B4 Style01

Form Step With B4 Style01

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Blog post card 01

Blog post card 01

Background overlay

Background overlay

Ajouter une pagination1

Ajouter une pagination1

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Ajouter supprimer une tr dans une table avec l'insertion des options sur une balise select

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table