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)
Calculatrice style01

Calculatrice style01

Card Profile Style01

Card Profile Style01

Cards box with title

Cards box with title

ChartJS style01

ChartJS style01

Créer des tds dynamiquement dans une table html

Créer des tds dynamiquement dans une table html

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Form login with background image changed style01

Form login with background image changed style01

Header Aside Footer Admin

Header Aside Footer Admin

Image hover 01

Image hover 01

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Profile page with b4

Profile page with b4

input file récupérer le nom du fichier

input file récupérer le nom du fichier