Dynamic Reading Position Progress Bar – proBaws.js

Preview:

Description:

proBaws.js is a JavaScript library for drawing a dynamic reading position progress bar on the top of the page.

When users scroll down the page, they will see the progress bar change. The progress bar starts off as empty and slowly fills up as you scroll down the page.

How to use it:

1. Import the proBaws.js into your document.

<link rel="stylesheet" href="css/probaws.min.css" />
<script src="js/probaws.min.js"></script>

2. Create an empty progress container at the top of the page.

<div class="progress"></div>

3. That’s it. You can customize the reading position progress bar via CSS.

.progress {
  position: fixed;
  left: 0;
  top: 0;
  width: 0%;
  height: 4px;
  background-color: tomato;
}