const progressJS = {
  "defaults": {
    //color
    "color": "#92BADC",
    //height
    "height": "5px",
    "top": 91,
    "bottom": 0,
    "left": 0,
    "right": 0,
    "zIndex": 9999,
    //bottom or top
    "ontop": true,
    //left to right
    "ltr": true,
    //element to use value
    "attach": false,
    //js style or css
    "css": true,
    //decimal numbers
    "round": false,
    //use only values
    "nobar": false
  },
  "start": function (configs = {}) {
    let progressJSelem;
    if (!configs.nobar) {
      //create element
      progressJSelem = document.createElement("div");
      //use css instead of js style
      progressJSelem.setAttribute('id', 'progressbarJS');
      //append to body
      document.body.appendChild(progressJSelem);
      //styles
      progressJSelem.style.position = 'fixed';
      progressJSelem.style.zIndex = '99999';
      progressJSelem.style.width = '0%';
      //configurable options
      //top or bottom
      configs.ontop ? progressJSelem.style.bottom = '0' : progressJSelem.style.top = progressJS.defaults.top;
      //ltr or rtl
      configs.ltr ? progressJSelem.style.right = '0' : progressJSelem.style.left = progressJS.defaults.left;
      //height
      configs.height ? progressJSelem.style.height = configs.height : progressJSelem.style.height = progressJS.defaults.height;
      //color
      configs.color ? progressJSelem.style.backgroundColor = configs.color : progressJSelem.style.backgroundColor = progressJS.defaults.color;
    }
    let attachElem = progressJS.defaults.attach;
    let roundto = progressJS.defaults.round;
    //round to
    configs.round ? roundto = configs.round : roundto = 2;
    //attach
    configs.attach ? attachElem = document.querySelector(configs.attach) : false;
    //scroll event
    document.addEventListener('scroll', function (e) {
      const maxHeight = document.body.scrollHeight;
      const sizeHeight = window.innerHeight;
      const scrolls = window.scrollY;
      const percentage = (scrolls / (maxHeight - sizeHeight)) * 100;
      if (!configs.nobar) {
        progressJSelem.style.width = percentage.toFixed(roundto) + "%";
      }
      if (attachElem) {
        attachElem.innerHTML = percentage.toFixed(roundto);
      }
    });

  }
}