Vivek Shrinivasan    About    Projects

Page Progress Bar

A quick way to enhance the user experience when they are scrolling through a page is to show them how far or how long they have to go before they finish the article.

A good way to show that is to showthem via a progress bar like

hbs-progress-bar

Javascript

It’s pretty easy to add this to your website and here’s a quick way to do it

Make sure your html like so

<body>
  <div id="progress"></div>

  <!-- rest of the content below this line -->


  <!-- rest of the content above this line -->
<script type="text/javascript"></script>
</body>

and add some style in your style tag

#progress {
  border-bottom: 2px solid blue;
  width: 0;
  position: fixed;
  top: 0; left: 0;
}

and add this code to your script section of the file

// making a large enough content for you to scroll
document.body.appendChild(document.createTextNode(
  "supercalifragilisticexpialidocious ".repeat(1000))
);

// get the div element
let bar = document.querySelector("#progress");

// register scroll event
window.addEventListener("scroll", () => {
  let max = document.body.scrollHeight - innerHeight;

  // change width of the div as you scroll
  bar.style.width = `${(pageYOffset / max) * 100}%`;
});

This should have the effect of the progress as shown in the image above.

NPM Permission Issues

Node module permissions


npm

change the directory for installing global npm packages from the default directory

/usr/local/lib/node_modules

to

~/.npm-global/lib/node_modules

So, now running something like npm install -g eslint with the -g flag i.e. install globally, then the package will be present in the ~/.npm-global/lib/node_modules folder.

permissions

see above image for permission list of both the new and the old folders.

You can also refer to this link for further reference