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



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

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

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

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

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
  "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 = `${(pageYOffset / max) * 100}%`;

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

NPM Permission Issues

Node module permissions


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




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.


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

You can also refer to this link for further reference